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

您需要在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 2

以下是在 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 调用后）才应更新页码。

Answer 3

  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);
    }

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

3 个答案: