Related to ionic infinite scrolling in Ionic2
I have a problem with ion-infinite-scroll
in my Ionic2 application. Please find the below code.
code
<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()
method
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")
}
}
In my case, the method doInfinite()
is only called the first 2 times. Although if(this.myReportList.length < this.reportCount){
true. Can someone please tell me why the method is not calling?
Scenario
Let's say I have a total of 50 and the first time I list the first 10 records, then when I get to the end of the reports it calls the method doInfinite()
with startFrom
and endTo
11 and 20 again respectively. But the third time ion-infinite-scroll
does not call the method. Please help me with this.
Edit
this.viewMyReports();
is the API call from where I get the reports
HTML page
<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>
Thanks and Regards
Anand Raj
source to share
You are missing infiniteScroll.complete();
Call complete () in an infinite exit event handler when your asynchronous operation has completed. For example, loading state while the application is performing an asynchronous operation, such as getting more data from an AJAX request to add more items to a list of data. once data has been received and the user interface has been updated, you call this method to indicate that the download is complete. This method will change infinite scroll states from loading to allowed.
Try it -
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();
}
source to share