时间戳

首页 > 解决方案 > 当用户转到下一页时加载数据

angular - 当用户转到下一页时加载数据

问题描述

我正在访问一个 api 端点，它 atm 检索 > 1000 个数据对象并将它们返回给用户。

我不认为这是有效的，因为一次只能查看 30 个对象。

有没有办法更有效地加载这些对象（即一次 30 个），尤其是当我将它与ngx-datatable集成时。

我的 api 允许这样做......只需将以下参数添加到 URL：

分页结果（设置 page=${pageNumber} 和 limit=${maxResultsOnPage}） 例如，将结果限制为每页 5 篇讲道并获得第二页：

 curl --request GET \
    --header 'content-type: application/json' \
    --url 'http://localhost:8080/sermon?limit=5&page=2'

讲道.component.ts

  public getAllSermons() {
    this.sermonSubscription = this.apiService.getAllSermons().subscribe((data: Array<object>) => {
      this.sermons = data;
      this.totalCount = Object.keys(this.sermons).length;
      this.logger.debug(`${data.length} sermons loaded`);
      this.isSermonsLoaded = true;
    });
  }

讲道.component.html

        <ngx-datatable class="material fullscreen" [rows]="sermons" [loadingIndicator]="loadingIndicator"
          [selected]="selected" [selectionType]="'single'" [columnMode]="'force'" [headerHeight]="50"
          [footerHeight]="50" [rowHeight]="'auto'" [limit]="30" (select)='onSelect($event)'>
          <ngx-datatable-column name="Date" [width]="80"></ngx-datatable-column>
          <ngx-datatable-column name="Speaker" [width]="200"></ngx-datatable-column>
          <ngx-datatable-column name="Name" [width]="600"></ngx-datatable-column>
        </ngx-datatable>

api.service.ts

  public getAllSermons() {
    return this.httpClient.get(`${this.apiUrl}/sermon?orderBy=date&sortAscending=false`).pipe(map((data: any) => data.data)
    );
  }

标签： angularngx-datatable

解决方案

使用 ngx-datatable，您可以将输入设置externalPaging为 true 并监听事件page。

这是文档中的一个示例：https ://github.com/swimlane/ngx-datatable/blob/master/demo/paging/paging-server.component.ts

推荐阅读