角度材料Paginator

Question

我会对我的问题非常具体,希望得到一个同样具体的答案.

我已经在线梳理过,关于这个主题的Angular文档对于现实生活中的情况都是模糊的,因为要求你从海洋中挑选一根针.Ooh Angular docs ...

到目前为止我做了什么

  <mat-paginator (page)="pageEvent = $event" #paginator [length]="pageLength" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions">
  </mat-paginator>

这在我的组件中

  pageLength: number;
  pageSize: 5;
  pageSizeOptions = [5, 10, 25, 100];

然后我更新pageLength端点响应的时间,如下所示:

  loadRequests() {
    this.busy = true;
    this.request_service.get_requests()
      .subscribe((res) => {
        console.log(res);
        this.requests = res['requests'];
        this.pageLength = this.requests.length; // let's assume length = 1000
      });
  }

上面的渲染在浏览器中很好地呈现了分页的UI

.get_requests()为简单起见,通过消耗的端点仅返回1000个固定项.

现在,这就是我现在正在渲染我的列表的方式:

<mat-card *ngFor="let request of requests">
  <mat-card-title> {{ request.title }}</mat-card-title>
</mat-card>

因此,在上述序言中,我需要完成哪些步骤才能让这个条件符合以下条件:

• 分页不会继续到端点来为每个pageIndex提取每个项目列表.
• 在从端点接收到第一次命中的1000个项目之后,分页在客户端本地将这个项目长度分块.没有更多的API调用.

Answer 1

假设您已在request中加载了响应数据（Array）。

您可能可以使用splice方法创建一个从requests属性返回一组数据的方法。

因此，在API订阅结果上，可以在首次加载时按以下方式处理：

this.request_service.get_requests()
  .subscribe((res) => {
    this.pageLength = res['requests'].length;
    this.splicedData = res['requests'].slice(((0 + 1) - 1) * this.pageSize).slice(0, this.pageSize);
  });

其中pageSize，已在前面定义为默认值。

然后，无论何时用户更改mat-paginator模板中的组件，都将pageChangeEvent运行。模板如下所示：

  <mat-paginator (page)="pageChangeEvent($event)" [length]="pageLength" [pageSize]="pageSize" [pageSizeOptions]="pageSizeOptions">
  </mat-paginator>

那么其对应的组成方法就是这个。

 pageChangeEvent(event) {
    const offset = ((event.pageIndex + 1) - 1) * event.pageSize;
    this.splicedData = this.requests.slice(offset).slice(0, event.pageSize);
  }

最后，您*ngFor可以使用splicedData数组来填充自身。

<mat-card *ngFor="let request of splicedData">
    <mat-card-title> {{ request.title }}</mat-card-title>
</mat-card>