Stop infiniteScroll?


#1

Hi,

I am very much new to Ionic2 and trying to use Infinite Scroll with a web service using provider. Its working fine however i am not able to stop it if there is no data. I am following Ionic2 documentation at https://ionicframework.com/docs/api/components/infinite-scroll/InfiniteScroll/

This is my code in .TS file

doInfiniteGallery(): Promise<any> {
	   
    console.log('Begin async operation');
	
	
    return new Promise((resolve) => {
		
	 this.authService.GetGallery(this.Num).subscribe(Result => {this.AvlData=Result.gallery.data;
setTimeout(() => {
		 
	for (var i = 0; i < this.AvlData.length; i++) {
          this.items.push( this.AvlData[i] );
        }

        console.log('Async operation has ended');
        resolve();
      }, 500);
	  this.Num=this.Num + this.AvlData.length + 1;	
	  
	  });	//subscribe end
	  	  
    })
  }

I am using a provider to fetch data from website, this is the code in provider -

GetGallery(count:any)
{
	
	return this.http.get("http://MYDOMAIN.COM/fetch.php?action=imagestitle&start="+count).map(res=>res.json());	
	}	

HTML File code as

<ion-item *ngFor="let item of items">
   
   <ion-row>
   
   <ion-col col-12 col-sm>
 
   <h1>{{item.createdate}}</h1>
   <p>{{item.title}}</p>
  </ion-col>
  
  </ion-row>
  
   </ion-item>

<ion-infinite-scroll (ionInfinite)="$event.waitFor(doInfiniteGallery())">
   <ion-infinite-scroll-content></ion-infinite-scroll-content>
 </ion-infinite-scroll>

Problem here is that i am not able to STOP the infinite scroll. I changed the code in HTML as

 <ion-infinite-scroll *ngIf="!lastpage" (ionInfinite)="$event.waitFor(doInfiniteGallery())">
   <ion-infinite-scroll-content></ion-infinite-scroll-content>
 </ion-infinite-scroll>

It worked but that spinner still shows.

I Googled and found that i need to use InfinateScroll.enable(false) however i am not able to put this in correct position inside function, i tried but it’s giving undefined error.

Can anyone please help me out ?

Thanks


#2

Hi, Anyone please, have some details about it?


#3

There is no need here for making promises or using setTimeout().

<ion-infinite-scroll *ngIf="completed"
 (ionInfinite)="fetchMorePics($event)">

fetchMorePics(evt: InfiniteScroll): void {
  this.authService.getGallery(this.npics).subscribe((pics) => {
    if (pics.length > 0) {
      Array.prototype.push.apply(this.pics, pics);
      this.npics += pics.length;
    } else {
      this.completed = true;
    }
    evt.complete();
  });
}