Блог

У меня есть огромный список элементов, поступающих из серверной части. Я использую ionic ion-infinite-scroll для отложенной загрузки данных, как только пользователь дойдет до конца списка. но я получаю приведенную ниже ошибку, когда пользователь доходит до конца списка.

Вот мой код

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);
  }


}
  

С Ionic4 происходит изменение типа событий, которые генерируются в версии 4. В Ionic v3 мы создавали синтетические события Angular, но в V4 мы генерируем HTML-события, что означает, что вам нужно получить доступ к методу complete из события target . Правильный способ справиться с этим сейчас — с помощью $event.target.methodName()

Решение —

  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);
  }
  

Надеюсь, это поможет всем, кто использует ionic v4!