如何在分页中更改标签中的文本? [英] How to change the text in the label in pagination?

问题描述

我使用角材质.如何更改分页标签中的文本?用于页面大小选择器的标签.

I use Angular Material. How to change the text in the label in the pagination ? For label for the page size selector.

我尝试这样做，但没有帮助:

I tried to do it but did not help:

<mat-paginator [pageSizeOptions]="[5, 10, 20]" [itemsPerPageLabel]="['The amount of data displayed']" showFirstLastButtons></mat-paginator>

推荐答案

嗯，这个好像是mat-paginator从一开始就有的问题，已经讨论过了here，所以我希望您在创建一个文件时提出同样的建议，请注意，在此文件中我们提供了标签.这个类扩展了 magpaginator 并且在主文件中我们显示我们正在使用自定义类进行分页.

Well this seems to be a problem with the mat-paginator from start, and it has been discussed here, so I would like you to suggest the same with work around create one file, note that in this file we are providing the lables. this class extends magpaginator and in main file we are showing that we are using the custom class for the pagination.

称为 CustomMatPaginatorIntl

喜欢这个

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

@Injectable()
export class CustomMatPaginatorIntl extends MatPaginatorIntl {
  constructor() {
    super();  

    this.getAndInitTranslations();
  }

  getAndInitTranslations() {

      this.itemsPerPageLabel = "test";
      this.nextPageLabel = "test";
      this.previousPageLabel = "test";
      this.changes.next();

  }

 getRangeLabel = (page: number, pageSize: number, length: number) =>  {
    if (length === 0 || pageSize === 0) {
      return `0 / ${length}`;
    }
    length = Math.max(length, 0);
    const startIndex = page * pageSize;
    const endIndex = startIndex < length ? Math.min(startIndex + pageSize, length) : startIndex + pageSize;
    return `${startIndex + 1} - ${endIndex} / ${length}`;
  }
}

并将其导入到 main.ts 文件中的提供者

and import it to the providers in main.ts file

 providers: [{
      provide: MatPaginatorIntl, 
      useClass: CustomMatPaginatorIntl
    }]

演示

你可以保留需要的东西，从原来的类中删除一个将使用

You can keep needed things, removed one will be used from original class

这篇关于如何在分页中更改标签中的文本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！