Angular 材质表更改分页格式

Question

我正在尝试实现一个有角度的材料表。我可以显示带有数据和分页的表格。

但是目前显示的分页格式是下面的格式。

Items per page 10 1- 10 of 20

但我希望分页格式是这样的。

Items per page 10 Range: 10/20

这是plnkr 网址。

Answer 1

1.创建一个customIntl extends MatPaginatorIntl。你可以替换你自己的标签。

import { MatPaginatorIntl } from '@angular/material';

export class CustomMatPaginatorIntl extends MatPaginatorIntl {

  getRangeLabel = function (page, pageSize, length) {
    if (length === 0 || pageSize === 0) {
      return '0/' + length;
    }
    length = Math.max(length, 0);
    const startIndex = page * pageSize;
    // If the start index exceeds the list length, do not try and fix the end index to the end.
    const endIndex = startIndex < length ?
      Math.min(startIndex + pageSize, length) :
      startIndex + pageSize;
    return endIndex + ' / ' + length;
  };
}

2.向您导入 MatPaginator 的模块添加 customIntl。

imports: [
       ...
       MatPaginatorModule,
],
providers: [
     ...
    {provide: MatPaginatorIntl, useClass: CustomMatPaginatorIntl}
  ]