How to stop infinite scroll after data finish load

Ionic Framework ionic-v3
1

I want to know how can I stop the infinite scroll after the list finish load the data.
currently when list finished fetching data from serve, it loads the data again. :smiley:
How can I stop loading data after it fetches the all the data ?

html

<ion-refresher (ionRefresh)="doRefresh($event)">
        <ion-refresher-content>
            pullingIcon="arrow-dropdown"
            pullingText="Pull to refresh"
            refreshingSpinner="circles"
            refreshingText="Refreshing...">
        </ion-refresher-content>
      </ion-refresher>
  <ion-list class="animate chat-item">  
          <button ion-item *ngFor="let blood of bloods" (click)="onShowBloodDetail(blood);" class="cardcontent">
        <ion-avatar item-start >
          <img src="{{blood.donor_photo.guid}}" class="imagedonorchota">
        </ion-avatar>
        <h2 style="color:black;  font-size: 22px;"><b>{{blood.donor_name}}</b></h2>
        <p style="color: brown; font-size: 18px;"><b>{{blood.blood_group}}</b></p>
      </button>
  </ion-list>
  <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
      <ion-infinite-scroll-content>
          loadingSpinner="bubbles"
          loadingText="Loading more donors...">
      </ion-infinite-scroll-content>
    </ion-infinite-scroll>

ts

export class BloodmainPage {
  bloods;

  constructor(public navCtrl: NavController, public navParams: NavParams, private BlooddonateProvider: BlooddonateProvider) {
    this.BlooddonateProvider.getBlood().subscribe(data =>{
      console.log(data);
      this.bloods = data;
    });
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad BloodmainPage');
  }

  onShowBloodDetail(blood){
    this.navCtrl.push('BlooddetailsPage', {blood: blood});
  }

  doInfinite(infiniteScroll) {
    this.BlooddonateProvider.getBlood().subscribe(data =>{
      console.log(data);
      this.bloods = this.bloods.concat(data);
      infiniteScroll.complete();
    });

  }

  doRefresh(refresher) {
    this.BlooddonateProvider.getBlood().subscribe(data =>{
      console.log(data);
      this.bloods = data;
      refresher.complete();
    });

  }
}

Please help me… I am new.

2

The infiniteScroll event, which you’ve called refresher, has a method called enable. Execute this method and pass false when you want to turn off infinite scroll.

Example:

if(noMoreDataToFetch){
refresher.enable(false);
}else{
refresher.complete();
}

3 
 doRefresh(refresher) {
    this.BlooddonateProvider.getBlood().subscribe(data =>{
      console.log(data);
      this.bloods = data;
      if(noMoreDataToFetch){
        refresher.enable(false);
        }else{
        refresher.complete();
        }
    });

still loading again and again after list complete. :frowning:

4

In the example code I gave, the noMoreDataToFetch variable is a boolean that you would need to change the value of after you’ve determined that getBlood has fetched all of the data that you need. Did you add this logic to your code but not show it in your response?

5

You can try to use *ngIf to remove it from the Dom when no more data avaliable.

If enable won’t work

6

how to use ngIf ? Please help … I am new.

and I am also facing a problem. When I scroll down to load more list items, it loads again from top items, … Not loading the new items from server. Why ?

Please check my code and correct me … Where I am wrong.
Please help me. Its for good cause. This app helps patients to reach faster to blood donors in my area. so they can get blood of needed blood group in medical emergency. Its list of Blood Donors.

7 
noMoreData = false;

doRefresh(refresher) {
    this.BlooddonateProvider.getBlood().subscribe(data =>{
      console.log(data);
      this.bloods = data;
      if(noMoreDataToFetch){
        this.noMoreData=true;
        refresher.enable(false);
        }else{
        refresher.complete();
        }
    });

<ion-infinite-scroll *ngIf="!noMoreData" (ionInfinite)="doInfinite($event)">
      <ion-infinite-scroll-content>
          loadingSpinner="bubbles"
          loadingText="Loading more donors...">
      </ion-infinite-scroll-content>
    </ion-infinite-scroll>
8

I know this is old. Just putting it out there so someone with the same issue can try this as well.

I kill the infiniteScroll by disabling it inside the error part of the subscription. Like below -

infiniteScroll(event) {
    for (let i = 0; i < 500 ; i++) {
      this.firebaseProvider.getImages(i)
        .subscribe(data => {
          console.log(data);
           arr.push(data);
           event.complete();
        }, error => {
          event.enable(false);
          console.log(error);
        })
    }

This way the http fails once but the scroller is killed which is alright I think.