使用 ng-if 时，Ion-Spinner 未显示在 Infinite-Scroll 上

Question

大家好，

问题是这样的：

当我为 Infinite-Scroll 微调器设置条件时，显示正在加载的文本...没有显示。当我删除条件时，一切正常。还有一个问题，那就是需要条件，因为当所有帖子都已检索时不需要无缘无故地调用端点。

这不起作用

      <ion-infinite-scroll (ionInfinite)="loadMore($event)" *ngIf="page < totalPage">
      <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="تحميل المزيد من الأخبار..."></ion-infinite-scroll-content>
  </ion-infinite-scroll>

这是有效的

  <ion-infinite-scroll (ionInfinite)="loadMore($event)">
      <ion-infinite-scroll-content loadingSpinner="bubbles" loadingText="تحميل المزيد من الأخبار..."></ion-infinite-scroll-content>
  </ion-infinite-scroll>

Answer 1

  doInfinite(infiniteScroll) {
     // this.page = this.page+1; // Remove this line because is hidding the spinner before api request is completed.
      setTimeout(() => {
        this.restApi.getUsers(this.page + 1) // Call api without changing the page yet
           .subscribe(
             res => {
               this.data = res; 
               this.page = this.page+1; // Add this line to hide spinner after api request is completed 
               this.perPage = this.data.per_page;
               this.totalData = this.data.total;
               this.totalPage = this.data.total_pages;
               for(let i=0; i<this.data.data.length; i++) {
                 this.users.push(this.data.data[i]);
               }
             },
             error =>  this.errorMessage = <any>error);

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

Answer 2

您需要在 ion-infinite-scroll-content 标签内传递条件。下面的例子对我很有效

示例：-

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

Answer 3

以下是 Ionic v5 中对我有用的内容：

<ion-infinite-scroll 
  (ionInfinite)="loadMore($event)"
  [disabled]="totalPages <= 1 || currentPage >= totalPages"> 
  <ion-infinite-scroll-content
    loadingSpinner="bubbles" 
    loadingText="Loading...">
  </ion-infinite-scroll-content>
</ion-infinite-scroll>

禁用标志只会在到达最后一页后禁用加载微调器。一旦禁用，无限滚动将不会发出额外的“loadMore”事件。正如有人已经提到的，只有在获取数据后（即在 loadMore API 调用成功完成后）才应更新页码。

使用 ng-if 时，Ion-Spinner 未显示在 Infinite-Scroll 上

Ion-Spinner not showing on Infinite-Scroll when using ng-if

hybrid-mobile-app

ionic2

ionic3

angular