Настройте mat-paginator для отображения общего количества записей

Question

Я использую mat-paginator, предоставляемый Angular Framework UI Material Design.

В настоящее время у меня есть настройки, показанные ниже, но в дополнение к этой информации я хочу иметь возможность отображать общее количество записей. (т. е. 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>

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