Ion-infinite-scroll's ionInfinite not firing

Ionic Framework Ionic Angular
1

Try as I might, I cannot get infinite scroll working. I have tried all kinds of different thresholds but still ionInfinite does not fire.

HTML:

<ion-content>

<div *ngIf="!isLoadingError">
    <ion-list *ngIf="items.length > 0">
        <ion-item *ngFor="let item of items" (click)="nav(item)" routerDirection="forward"
                  routerLinkActive="active">
            <ion-thumbnail slot="start">
                <!--                <img *ngIf="item.imageURIs[0]" [src]="item.imageURIs[0]">-->
                <!--                <ion-skeleton-text *ngIf="!item.imageURIs[0]"></ion-skeleton-text>-->
                <ion-skeleton-text></ion-skeleton-text>
            </ion-thumbnail>
            <ion-label>
                <h3>{{item.name}}</h3>
                <p>
                    {{item.desc}}
                </p>
                <p>
                    {{formatPriceString(item.price, 'KRW')}}
                </p>
            </ion-label>
        </ion-item>
    </ion-list>

    <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
        <ion-infinite-scroll-content
                loadingSpinner="bubbles"
                loadingText="Loading more items...">
        </ion-infinite-scroll-content>
    </ion-infinite-scroll>

</div>
</ion-content>

TS:

export class HomePage {

@ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;



constructor() {

}

doInfinite(e) {
    this.getItems(e);
}
2

Can you see if the problem persists even when the <ion-infinite-scroll> element is always present in the DOM? IOW, free it from the *ngIf gating you have it inside now.

3

Good idea! Unfortunately, it still doesn’t work.