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

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

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

是否有一种方法可以更有效地加载这些对象（即一次加载30个），尤其是在我将其与集成的情况下

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

分页结果（设置页面=${pageNumber}和 limit=${maxResultsOnPage}）例如，将结果限制在每页5条布道 并获得第2页：

布道组件.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;
    });
  }

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

---

使用ngx datatable，您可以将输入

externalPaging

设置为true，并收听事件

page

---

以下是文档中的一个示例：

ngx datatable

本身支持分页。你查过了吗？

        <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>

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