Infinte Scroll с загрузкой сообщений после 10 пунктов

Question

Я показываю список предметов. Я хочу, когда мы прокручиваем, после отображения 10 пунктов. отображается «загрузка еще ...»

(ionInfinite)="doInfinite($event)" 

не запускается.

.html файл

<ion-content padding>

  <ion-list>
    <ion-item *ngFor="let i of items">{{i}}</ion-item>
  </ion-list>

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

</ion-content>

.ts file

import { IonInfiniteScroll, IonVirtualScroll } from '@ionic/angular';

export class FoodMenuPage implements OnInit {
  @ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
  items = [];

  constructor() { 
    for (let i = 0; i < 30; i++) {
      this.items.push( this.items.length );
      }
  }


  doInfinite(infiniteScroll) {
    console.log('Begin async operation');

    setTimeout(() => {
    for (let i = 0; i < 30; i++) {
    this.items.push( this.items.length );
    }

    console.log('Async operation has ended');
    infiniteScroll.complete();
    }, 500);
    }

Answer 1

HTML

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

<div *ngIf="pagingEnabled" class="nomore_data"> No more data is available.</div>

TS

if (this.image1 != 0) {
        for (let i in this.image1) {
          this.images = this.images.concat(this.image1[i]);
        }
      } else {
        this.pagingEnabled = true;
      } \\image1 and image have same json value

if (Infinitescroll) { \\every scroll infinite has been fire
        Infinitescroll.target.complete();\\every scroll tarhas been completed
      }

нет необходимости для viewchild или чего-либо еще