自定义 mat-paginator 以显示记录总数答案

【问题标题】：Customise mat-paginator to show total number of records自定义 mat-paginator 以显示记录总数
【发布时间】：2020-06-06 07:09:05
【问题描述】：

我正在使用 Angular Material Design UI 框架提供的 mat-paginator。

我目前有如下所示的设置，但除了这些信息之外，我还希望能够在下面显示的分页器块中显示记录总数（即 45 条）。

我从后端服务得到的响应如下；

page: {size: 5, totalElements: 45, totalPages: 9, number: 0}

我已使用此信息来设置 mat-paginator 属性，如下所示。

  <mat-paginator #paginator
    [length]=result.pages
    [pageSize]=result.pageSize
    [pageSizeOptions]="[5, 10, 20, 50, 100]"
    [pageIndex]=result.page
    (page)="getNext($event)"
    showFirstLastButtons>
  </mat-paginator>

【问题讨论】：

标签： angular-material

【解决方案1】：

鉴于后端服务的以下响应...

page: {size: 5, totalElements: 45, totalPages: 9, number: 0}

以下定义就足够了：

<mat-paginator #paginator
    [length]="result.page.totalElements"
    [pageSizeOptions]="[5, 10, 20, 50, 100]"
    (page)="getNext($event)"
    showFirstLastButtons="true">
</mat-paginator>

【讨论】：