与 Ionic2 中的 ion-infinite-scroll 相关

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 和 endTo 11 和分别为 20 。但是从第三次开始，ion-infinite-scroll 没有调用该方法。 请帮我解决一下这个 。

编辑

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

HTML 页面

<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() 异步操作已完成。比如加载状态是while 应用正在执行异步操作，例如接收 来自 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();
}