ion-infinite-scroll not working after 2 pages.

[adan92]

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)  : 4.1.2 (C:\Users\amezc\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework    : ionic-angular 3.9.2
   @ionic/app-scripts : 3.2.0

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.2, cordova-plugin-ionic-webview 2.1.3, (and 14 other plugins)

System:

   Android SDK Tools : 26.1.1 (C:\Users\amezc\AppData\Local\Android\Sdk)
   NodeJS            : v6.13.1 (C:\Program Files\nodejs\node.exe)
   npm               : 3.10.10
   OS                : Windows 10

Describe the Bug

I am getting 20 data per pagination but after 2 pages event is not working in function.

Steps to Reproduce

Related Code

<ion-header>
  <ion-navbar>
    <ion-title>listEstablishment</ion-title>
  </ion-navbar>
</ion-header>
<ion-content padding>
    <ion-list text-wrap>
        <ion-item *ngFor="let listedStore of storeList"
        >
          <p>{{listedStore.action}}</p>
        </ion-item>
      </ion-list> 
      <ion-infinite-scroll (ionInfinite)="loadMore($event)" [enabled]="shouldEnableScrolling" >
        <ion-infinite-scroll-content
        loadingSpinner="bubbles" loadingText="Cargando Establecimientos..."
        ></ion-infinite-scroll-content>
      </ion-infinite-scroll>
</ion-content>

Expected Behavior

Can load more than 2 pages with using ion-infinite-scroll

Additional Context

I've tried add it in a component or modal but same problem.

[peterpullmann]

Hi,
I have same situation - load only 2nd page and then no event occured.
script code:
doInfinite($event) : Promise {
...
}
and html:
<ion-infinite-scroll (ionInfinite)="doInfinite($event)" *ngIf="displayInfinite">

I needed to change HTML code to (added $event.waitFor...):
<ion-infinite-scroll (ionInfinite)="$event.waitFor(doInfinite($event))" *ngIf="displayInfinite">

And now it is working.

[fynmm]

Hi,
I have same situation - load only 2nd page and then no event occured.
script code:
doInfinite($event) : Promise {
...
}
and html:
<ion-infinite-scroll (ionInfinite)="doInfinite($event)" *ngIf="displayInfinite">

I needed to change HTML code to (added $event.waitFor...):
<ion-infinite-scroll (ionInfinite)="$event.waitFor(doInfinite($event))" *ngIf="displayInfinite">

And now it is working.

I tried your suggestion, but there was a mistake.

ERROR TypeError: $event.waitFor is not a function
    at Object.eval [as handleEvent] (TestInfinitePage.html:14)
    at handleEvent (core.js:10251)
    at callWithDebugContext (core.js:11344)
    at Object.debugHandleEvent [as handleEvent] (core.js:11047)
    at dispatchEvent (core.js:7710)
    at core.js:8154
    at HTMLElement.<anonymous> (platform-browser.js:988)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3811)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)

[davidquintard]

What about this issue ?
I got same.

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

C:\Applications\Node\front>ionic info

Ionic:

   ionic (Ionic CLI)             : 4.8.0 (C:\Users\lbzc4600\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.2
   @angular-devkit/build-angular : 0.12.2
   @angular-devkit/schematics    : 7.2.2
   @angular/cli                  : 7.2.2
   @ionic/angular-toolkit        : 1.2.2

System:

   NodeJS : v10.15.0 (C:\Program Files\nodejs\node.exe)
   npm    : 6.4.1
   OS     : Windows 7

Ionic:

   ionic (Ionic CLI)             : 4.5.0 (C:\Users\User28\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.2
   @angular-devkit/build-angular : 0.8.9
   @angular-devkit/schematics    : 7.2.2
   @angular/cli                  : 7.2.2
   @ionic/angular-toolkit        : 1.2.2

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (0 plugins total)

System:

   Android SDK Tools : 26.1.1 (C:\Users\User28\AppData\Local\Android\Sdk)
   NodeJS            : v8.11.3 (C:\Program Files\nodejs\node.exe)
   npm               : 6.3.0
   OS                : Windows 10

Once the disabled property is made true, we are unable to make it false.
As specified in docs,

export class InfiniteScrollExample {
  @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;

  constructor() {}

  loadData(event) {
    setTimeout(() => {
      console.log('Done');
      event.target.complete();

      // App logic to determine if all data is loaded
      // and disable the infinite scroll
      if (data.length == 1000) {
        event.target.disabled = true;         <------------ (a)
      }
    }, 500);
  }

  toggleInfiniteScroll() {
    this.infiniteScroll.disabled = !this.infiniteScroll.disabled;
  }
}

this.infiniteScroll.disabled = !this.infiniteScroll.disabled; <----- Not working.

try this:
(b) console.log(this.infiniteScroll);
(c) console.log(this.infiniteScroll.disabled);

the disabled property in both consoles (b) & (c) will differ once it's made true (a).

[firebiird]

Is there any update with this? I'm having the same issue and none of the steps above seem to work?

Ionic:

   ionic (Ionic CLI)             : 4.8.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.0.0-rc.1
   @angular-devkit/build-angular : 0.13.1
   @angular-devkit/schematics    : 7.1.4
   @angular/cli                  : 7.1.4
   @ionic/angular-toolkit        : 1.2.3

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : ios 4.5.5
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 6 other plugins)

System:

   NodeJS : v9.10.1 (/usr/local/Cellar/node/9.10.1/bin/node)
   npm    : 5.6.0
   OS     : macOS Mojave
   Xcode  : Xcode 10.1 Build version 10B61 

[Mazus]

Same issue here, $event.waitFor() workaround doesn't seem to work either.

Anything planned for correction, or other workaround ?

Thanks.

Ionic:

   ionic (Ionic CLI)             : 4.12.0 (C:\Users\rmazu\AppData\Roaming\npm\node
_modules\ionic)
   Ionic Framework               : @ionic/angular 4.1.2
   @angular-devkit/build-angular : 0.13.7
   @angular-devkit/schematics    : 7.3.7
   @angular/cli                  : 7.3.7
   @ionic/angular-toolkit        : 1.5.0

Cordova:

   cordova (Cordova CLI) : 9.0.0
   Cordova Platforms     : android 7.1.4
   Cordova Plugins       : cordova-plugin-ionic 5.3.0, cordova-plugin-ionic-keyboa
rd 2.1.3, cordova-plugin-ionic-webview 3.1.2, (and 7 other plugins)

System:

   Android SDK Tools : 26.1.1 (C:\DEV\AndroidSDK)
   NodeJS            : v10.15.0 (C:\DEV\nodejs\node.exe)
   npm               : 6.9.0
   OS                : Windows 10

check this one out #17372

[PsiOps]

I was having the same issue. The load of the first page went well. Then the event was fired, which triggered the loading of the second page, which happened, but the loader never finished, and was unable to raise the event another time. The reason: I found out I was not calling event.target.complete() in my async callback, after adding the newly fetched data to the array. Once I did that, the thing worked like a charm.

public loadMoreData(event: any) {
    this.apiService.getMoreData().subscribe(data => {
        this.localData = this.localData.concat(data);
        event.target.complete(); // Muy importante! 
    });
}

[sunsus]

Any Update on this?

[achopijocoder]

Same here, any updates?

[ionitron-bot]

Thanks for the issue! This issue is being closed due to inactivity. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.

Thank you for using Ionic!