在 Ionic 4 中调用 complete() 时，无限滚动不起作用答案

【问题标题】：Infinite-scroll is not working when calling complete() in Ionic 4在 Ionic 4 中调用 complete() 时，无限滚动不起作用
【发布时间】：2019-03-12 05:49:53
【问题描述】：

我有大量来自后端的项目。一旦用户到达列表末尾，我正在使用 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);
  }


}

【问题讨论】：

标签： angular ionic4

【解决方案1】：

从 Ionic4 开始，V4 中发出的事件类型发生了变化。在 Ionic v3 中，我们发出合成的 Angular 事件，但在 V4 中，我们发出 HTML 事件，这意味着您需要从事件 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 的每个人都有帮助！

【讨论】：