Infinite-scroll is not working when calling complete() in Ionic 4

Question

I have a huge list of items coming from the backend. I am using ionic ion-infinite-scroll for lazy loading of data once the user reaches to end of the list. but I am getting the below error when user reach to the end of the list.

Here is my code

list.component.html

<ion-content padding>
    <ion-list>
        <ion-item *ngFor="let i of items">{{i}}</ion-item>
    </ion-list>
    <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
        <ion-infinite-scroll-content loadingSpinner="bubbles"></ion-infinite-scroll-content>
    </ion-infinite-scroll>
</ion-content>

list.component.ts

export class ActionSheetComponent {

  items = [];
  constructor(
    private actionSheetCtrl: ActionSheetController
  ) {
     for (let i = 0; i < 30; i++) {
      this.items.push(this.items.length);
    }
  }

  doInfinite(infiniteScroll) {
    console.log('Begin async operation');

    setTimeout(() => {
      for (let i = 0; i < 30; i++) {
        this.items.push(this.items.length);
      }

      console.log('Async operation has ended');
      infiniteScroll.complete();
    }, 500);
  }


}

Answer 1

From Ionic4 there is a change in the kind of events that are emitted in V4. In Ionic v3 we were emitting synthetic Angular events, but in V4 we're emitted HTML events, meaning you need to access the complete method from the event target. The correct way to handle this now is with $event.target.methodName()

Solution -

 doInfinite(infiniteScroll) {

    setTimeout(() => {
      for (let i = 0; i < 30; i++) {
        this.items.push(this.items.length);
      }

      infiniteScroll.target.complete(); // this is how you need to call in v4
    }, 500);
  }

Hope this will help everyone who is using ionic v4!