订阅 API 后，Ionic 5 不断重新加载同一页面答案

【问题标题】：Ionic 5 keeps reloading same page after API subscription订阅 API 后，Ionic 5 不断重新加载同一页面
【发布时间】：2021-09-07 15:57:06
【问题描述】：

我正在调用一个包含分页的 API。

使用 ngb-pagination 进行分页。 API的请求是页码，响应是要显示的数据。调用 API 后，当我从第 1 页更改为第 2 页时，它会调用两次 API。请求页面 = 2 而不是请求页面 = 1。看起来它一次又一次地重新加载视图。

分页初始化为 page = 1;

  ionViewWillEnter()
{
  this.filterUserOntimeFunction(1)
}

换页功能

 onPageChange = (pageNumber) => {
    this.filterUserOntimeFunction(pageNumber);
    this.pageSize = this.itemsPerPage * (pageNumber - 1);
  };

调用 API 的函数

filterUserOntimeFunction = (request) => {
    this.filterService.filterUserOntime(request).subscribe(data => {
      this.dataStore = data['response'];
      this.collectionSize = data["response"].length;
      this.pageSize = this.collectionSize / 5;     
    }, error => console.log('Could not load data.', error));
  }

html 中的代码只是显示一些数据

<div *ngIf="dataStore; else elseBlock">
    <ion-grid>
      <ion-row class="ion-nowrap">
        <ion-col class="text-center" size="6" *ngFor="let j of dataStore">
          <ion-card class="myCard" (click)="personSelected(j)">
            <ion-img
              [src]="j.t_path_immagine"
              style="width: max-content"
              alt="100"
            ></ion-img>
            <ion-item class="myOverlay">
              <div class="subtitle"></div>
              <ion-label class="ml-2 card-title">{{j.t_nome}}</ion-label>
            </ion-item>
          </ion-card>
        </ion-col>
      </ion-row>
      <ngb-pagination
        [collectionSize]="collectionSize"
        [(page)]="currentPage"
        [pageSize]="itemsPerPage"
        (pageChange)="onPageChange($event)"
        [maxSize]="5"
        aria-label="Default pagination"
      ></ngb-pagination>
      <ion-button (click)="logScrollEnd(dataStore.length)"
        >Load more</ion-button
      >
    </ion-grid>
  </div>

  <ng-template #elseBlock> Data is loading. Please wait </ng-template>

结果如下图:

【问题讨论】：

标签： angularjs angular ionic-framework ionic4 ionic5

【解决方案1】：

Ionic 5 和 ngb 分页未按预期工作。相反，第 4 版运行良好。

我必须更改的代码是卸载 boostrap、ngx-pagination 和删除

<ngb-pagination
        [collectionSize]="collectionSize"
        [(page)]="currentPage"
        [pageSize]="itemsPerPage"
        (pageChange)="onPageChange($event)"
        [maxSize]="5"
        aria-label="Default pagination"
      ></ngb-pagination>

而不是插入下面的代码

 &lt;pagination-controls (pageChange)="onPageChange($event)"&gt;&lt;/pagination-controls&gt;

【讨论】：

【解决方案2】：

 <ion-infinite-scroll
      [disabled]="isScrollDisabled"
      threshold="100px"
      (ionInfinite)="loadMoreData($event)"
    >
      <ion-infinite-scroll-content
        loadingSpinner="bubbles"
        loadingText="Loading more data..."
      >
      </ion-infinite-scroll-content>
    </ion-infinite-scroll>

使用它并像这样通过 ts 文件更新您的页码

export class XYZ{
pageNumber : number;

 ionViewWillEnter()
{ this.pageNumber = 0;
  this.filterUserOntimeFunction(this.pageNumber);
}
loadMoreData(event){ 
    this.pageNumber++ ;
    this.filterUserOntimeFunction(this.pageNumber);
}

}

这项工作真的很棒。

【讨论】：

谢谢，但我正在寻找不滚动的分页。