Question

我正在使用Angular 4，我需要更改paginator的值“每页项目数”。我怎样才能得到这个值？

HTML：

<mat-paginator class="mat-paginator" #paginator [length]="table_data && table_data.resultsLength" [pageSizeOptions]="[10, 25, 100]" [pageSize]="customerMessageService.rowsNumber">
</mat-paginator>

在文件中说：

To modify the labels and text displayed, create a new instance of MatPaginatorIntl and include it in a custom provider

我从“@ angular / material”导入了{MatPaginatorModule}并将MatPaginatorIntl放在提供程序中。

我应该在我的.ts文件中做什么？

把它放在我的component.ts中是对的吗？

export class MatPaginatorIntl {
  itemsPerPageLabel = "1234";
}

Answer 1

要自定义/更改itemsPerPageLabel，我们需要在Component类中扩展MatPaginatorIntl类，还需要在模块内部提供provider数组。

app.component.ts -

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

export class AppComponent extends MatPaginatorIntl {

 itemsPerPageLabel = 'custome_label_name';//customize item per page label

  constructor() {
    super();
  }
}

app.component.html-

 <mat-paginator> </mat-paginator>

app.module.ts-

import { MatPaginatorIntl, MatPaginatorModule } from '@angular/material';
import { AppComponent } from './app.component';

@NgModule({
  imports: [
    MatPaginatorModule
  ]
    providers: [
    { provide: MatPaginatorIntl, useClass: AppComponent }
  ]
})

我们还可以更改MatPaginatorIntl类中的以下标签：-

itemsPerPageLabel：字符串；
（页面大小选择器的标签。）
nextPageLabel：字符串；
（用于增加当前页面的按钮的标签。）
previousPageLabel：字符串；
（用于缩小当前页面的按钮标签。）
firstPageLabel：字符串；
（用于缩小当前页面的按钮标签。）
lastPageLabel：字符串；
（移动到最后一页的按钮的标签。）

如何在mat-paginator中更改itemsPerPageLabel（Angular 4）

1 个答案: