如何在分页中更改标签中的文本? [英] 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的问题，并且已经对此进行了讨论

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屋！