Question

我正在访问一个atm检索超过1000个数据对象并将其返回给用户的api端点。

我认为这样做效率不高，因为一次只能查看30个对象。

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

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

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

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

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

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

Answer 1

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

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

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

1 个答案: