How to work with ion-infinite-scroll after upgrade v3 to v4?

Hi Dear,
I am recently updating an app in ionic v3 version to v4, I have a problem loading data and a modal component, which previously works perfectly in ionic v3.

When using the push method, data is not loaded on the screen.

Line 145:

this.dataFiltered.push(...response);

I change for this:

this.dataFiltered  = response;

The data is now loaded, the infinite scroll does not work.

My .ts file:

import { Component, ViewChild, OnInit } from '@angular/core';
import { NavController, ModalController, IonInfiniteScroll, IonVirtualScroll, NavParams } from '@ionic/angular';
import { SelectModalPagedInterface } from '../../../interfaces/select-modal-paged-interface';
import { CustomModalModel } from '../../../models/customModalModel';
import { KeyValue } from '../../../models/keyValue';
import { TipoCampoEntity } from '../../../database-entities/modulo-os/TipoCampoEntity';
import { OrdemServicoCampoValorEntity } from '../../../database-entities/modulo-os/OrdemServicoCampoValorEntity';
import { StringHelper } from '../../../helpers/string-helper';
import { NavigationExtras, ActivatedRoute } from '@angular/router';

@Component({
    selector: 'page-select-modal-paged',
    templateUrl: 'select-modal-paged.html',
})
export class SelectModalPagedPage implements OnInit {
    navTitle: String;

    dataFiltered: Array<KeyValue | CustomModalModel> = [];

    data: Array<KeyValue | CustomModalModel> = [];

    codigo: string;

    descricao: string;

    dataSelected: number;

    interface: SelectModalPagedInterface<KeyValue | CustomModalModel>;

    tipoCampoId: number;

    codigoParametroPai: string;

    hasFinished: boolean;

    filter: string;

    tipoCampo: TipoCampoEntity;

    valorCampos: OrdemServicoCampoValorEntity[];

    customized: boolean;

    modoFiltragem: boolean;

    tipoCampoNome: string;
    equipamento: number;

    @ViewChild(IonVirtualScroll) virtualScroll: IonVirtualScroll;
    private count = 0;

    constructor(
        public navCtrl: NavController,
        private modal: ModalController,
        private navParams: NavParams,
        private activeRoute: ActivatedRoute
    ) {
        this.navTitle = this.navParams.data.modalParams['title'];
        this.codigo = this.navParams.data.modalParams['codigo'];
        this.descricao = this.navParams.data.modalParams['descricao'];
        this.dataSelected = this.navParams.data.modalParams['dataSelected'];
        this.interface = this.navParams.data.modalParams['interface'];
        this.tipoCampoId = this.navParams.data.modalParams['tipoCampoId'];
        this.codigoParametroPai = this.navParams.data.modalParams['codigoParametroPai'];
        this.tipoCampo = this.navParams.data.modalParams['tipoCampo'];
        this.valorCampos = this.navParams.data.modalParams['valorCampos'];
        this.customized = this.navParams.data.modalParams['customized'];
        this.modoFiltragem = this.navParams.data.modalParams['modoFiltragem'];
        this.tipoCampoNome = this.navParams.data.modalParams['tipoCampoNome'];
        this.equipamento = this.navParams.data.modalParams['equipamento'];
    }

    async ngOnInit() {
        await this.loadData();
        console.log(this.dataFiltered);
    }

    fechar() {
        this.modal.dismiss();
    }

    confirmar() {
        this.modal.dismiss(this.dataSelected);
    }

    filterItems(ev: any) {
        this.filter = ev.target.value;

        if (this.customized) {
            this.filterCustomized();
        } else {
            this.loadData(true);
        }
    }

    filterCustomized(): void {
        if (this.filter && this.filter !== '' && !StringHelper.isNullOrEmpty(this.filter)) {
            const desc = this.descricao;
            const cod = this.codigo;

            this.dataFiltered = this.data.filter((item) => {
                return String(item[desc]).toLowerCase().includes(this.filter.toLowerCase()) ||
                    String(item[cod]).toLowerCase().includes(String(this.filter).toLowerCase());
            });
        }
    }

    onChange() {
        this.virtualScroll.checkEnd();
    }

    async doInfinite(event) {
        console.log(event);
        setTimeout(async() => {
            await this.loadData();
            console.log(`chamou`);
            event.target.complete();
        }, 500);
    }

    private async loadData(byFilter: boolean = false): Promise<void> {
        return new Promise<void>(async (resolve, reject) => {
            try {
                if (this.customized) {
                    await this.loadDataCustomized();
                    resolve();
                } else {
                    if (byFilter) {
                        this.count = 0;
                        this.hasFinished = false;
                    }

                    const response = await this.interface.getData(this.count, this.tipoCampoId, this.filter, this.codigoParametroPai, this.tipoCampo, this.valorCampos, this.modoFiltragem, this.tipoCampoNome, this.equipamento);

                    this.count++;

                    if (response.length === 0) {
                        this.hasFinished = true;
                        if (byFilter) {
                            this.dataFiltered = [];
                        }
                    } else if (byFilter) {
                        this.dataFiltered = response;
                    } else {
                        this.dataFiltered.push(...response);
                    }
                    resolve();
                }
            } catch (error) {
                reject();
            }
        });
    }

    private loadDataCustomized(): Promise<void> {
        return new Promise<void>((resolve, reject) => {
            try {
                this.interface.getData(this.count, this.tipoCampoId, this.filter, this.codigoParametroPai, this.tipoCampo, this.valorCampos, this.modoFiltragem, this.tipoCampoNome).then((response) => {
                    this.data = response;
                    this.dataFiltered = response;
                    resolve();
                });
            } catch (error) {
                reject();
            }
        });
    }
}

My html file:

<ion-header>
    <ion-toolbar navbar [color]="'primary'">
        <ion-title>{{navTitle}}</ion-title>
        <ion-buttons slot="primary">
            <ion-button (click)="fechar()">
                <ion-label class="ion-text-right">Fechar</ion-label>
            </ion-button>
        </ion-buttons>
    </ion-toolbar>

    <ion-toolbar no-border-top>
        <ion-searchbar placeholder="Filtrar" (ionInput)="filterItems($event)">
        </ion-searchbar>
    </ion-toolbar>

</ion-header>

<ion-content radio-group>
    <ion-radio-group  [(ngModel)]="dataSelected">
        <ion-virtual-scroll [items]="dataFiltered" [approxItemHeight]="'60px'">
                <ion-item *virtualItem="let item">
                    <ion-label>                        
                        <ion-grid>        
                            <ion-row>
                                <ion-col class="code" class="ionic-text-wrap">
                                    {{item[codigo]}}
                                </ion-col>
                                <ion-col class="description ionic-text-wrap" *ngIf="navTitle.toString() != 'Patrimonio'">
                                    {{item[descricao]}}
                                </ion-col>
                                <ion-col class="description ionic-text-wrap" *ngIf="navTitle.toString() == 'Patrimonio'">
                                    PAT-{{item.campoAuxiliar}} - {{item[descricao]}}
                                </ion-col>
                            </ion-row>
                            <ion-row *ngIf="customized">
                                <ion-col class="description ionic-text-wrap">
                                    <ion-row>
                                        {{item.title}}
                                    </ion-row>
                                    <ion-row>
                                        {{item[descricao]}}
                                    </ion-row>
                                    <ion-row>
                                        {{item.description}}
                                    </ion-row>
                                </ion-col>
                            </ion-row>
                        </ion-grid>
                    </ion-label>
                    <ion-radio [value]="item[codigo]" [checked]="item[codigo] == dataSelected">
                    </ion-radio>
                </ion-item>    
            </ion-virtual-scroll>
            <ion-infinite-scroll (ionInfinite)="doInfinite($event)" *ngIf="!hasFinished && !customized && !modoFiltragem">
                <ion-infinite-scroll-content loadingText="Carregamento mais {{navTitle | lowercase}}...">
                                        
                </ion-infinite-scroll-content>
            </ion-infinite-scroll>                
        </ion-radio-group>    
</ion-content>

        

<ion-button color="primary" expand="full" (click)="confirmar()" [disabled]="dataSelected === null">
    Confirmar
    <ion-icon name="ios-checkmark"></ion-icon>
</ion-button> 

1 post - 1 participant

Read full topic