角度材质表更改分页格式

时间:2017-11-27 17:13:23

标签: angular-material

我正在尝试实现角度材质表。我能够用数据和分页显示表格。

但目前显示的分页格式采用以下格式。

Items per page 10 1- 10 of 20

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

Items per page 10 Range: 10/20

以下是plnkr网址。

1 个答案:

答案 0 :(得分:0)

1。创建一个customIntl扩展了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}
  ]