与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")
    }
}

在我的情况下，仅在前2次调用doInfinite()方法。即使if(this.myReportList.length < this.reportCount){ 是真的 。谁能告诉我为什么这个方法没有调用？

方案

假设我的总数为50，并且我第一次列出前10条记录，然后当我到达报告结尾时再次使用doInfinite()和startFrom方法调用endTo方法分别为{1}} 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>

谢谢和问候

Anand Raj

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