与Ionic2中的离子无限滚动有关

Question

我在Ionic2应用程序中遇到ion-infinite-scroll问题。请找到下面的代码。

法典

<ion-infinite-scroll (ionInfinite)="doInfinite()" distance="5%">
<ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>

doInfinite()方法

doInfinite(){
if(this.myReportList.length < this.reportCount){
console.log("Inside doInfinite if");
this.loadMore=true;
this.startFrom = this.endTo+1; // for the time time the value of startFrom is 0 and endTo is 10.
this.endTo = this.endTo+10;
this.viewMyReports();
}else{
console.log("Inside doInfinite else");
this.loadMore=false;
this.genericService.showToast("Reached Bottom")
}
}

就我而言，doInfinite()方法仅在前 2 次被调用。即使if(this.myReportList.length < this.reportCount){是真的.谁能告诉我为什么该方法没有调用？

场景

假设我的总数为 50，并且我第一次列出前 10 条记录，然后当我到达报告末尾时，它再次调用doInfinite()方法，分别使用startFrom和endTo11 和 20。但是第三次，ion-infinite-scroll没有调用该方法。 请帮我这个.

编辑

this.viewMyReports();是我从中获取报告的 API 调用

网页

<ion-card *ngFor="let XX of responseList">
<ion-item>
<ion-row>
<ion-col col-7>
<p {{XX.***}}</p>
<p {{XX.***}}</p>
</ion-col>
<ion-col col-5>
<p> Submitted</p>
<p >{{XX.***}}</p>
</ion-col>
</ion-row>
</ion-item>
<ion-card>

感谢和问候

阿南德·拉吉

Answer 1

你缺少infiniteScroll.complete();

在无限输出事件处理程序中调用 complete(( 时，您的 异步操作已完成。例如，加载状态为 应用正在执行异步操作，例如接收 来自 AJAX 请求的更多数据，以向数据列表添加更多项。一次 已接收数据并更新 UI，然后调用此方法 表示加载已完成。此方法将更改 无限滚动的状态从加载到启用。

试试这个——

.HTML：

<ion-infinite-scroll (ionInfinite)="doInfinite($event)" distance="5%">
<ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="Loading more data...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>

TS：

doInfinite(infiniteScroll: any){
if(this.myReportList.length < this.reportCount){
console.log("Inside doInfinite if");
this.loadMore=true;
this.startFrom = this.endTo+1; // for the time time the value of startFrom is 0 and endTo is 10.
this.endTo = this.endTo+10;
this.viewMyReports();
}else{
console.log("Inside doInfinite else");
this.loadMore=false;
this.genericService.showToast("Reached Bottom")
}
infiniteScroll.complete();
}