mat-paginator 不顯示頁面信息

Question

材料分頁器不顯示頁面信息。

在官方文檔中，有頁面信息：'Page 1 of 20' 但是當我在本地運行他們自己的代碼時，或者在 Stackblitz 中會出現不同的輸出。

它顯示項目數：'1-10 of 100'

我正在運行與文檔相同的版本

是這個錯誤，還是我搞砸了一些屬性設置？

見圖片：

墊文件：

堆棧閃電戰：

Answer 1

MatPaginator 有一個名為getRangeLabel的屬性。 您可以根據需要使用它來更改標簽。

在您的組件中，設置您的分頁器：

@ViewChild(MatPaginator, {static : false}) paginator!: MatPaginator;

然后在 afterViewInit 中分配一個自定義函數：

ngAfterViewInit() {

    this.paginator._intl.itemsPerPageLabel = 'Your custom text';
 }

------------------------或------------

ngAfterViewInit() {
    this.paginator._intl.getRangeLabel = this.getRangeDisplayText;
  }

然后設置一個自定義函數來顯示你需要的文本：

getRangeDisplayText = (page: number, pageSize: number, length: number) => {
  const initialText = `Displaying users`;  // customize this line
  if (length == 0 || pageSize == 0) {
    return `${initialText} 0 of ${length}`;
  }
  length = Math.max(length, 0);
  const startIndex = page * pageSize;
  const endIndex = startIndex < length 
    ? Math.min(startIndex + pageSize, length) 
    : startIndex + pageSize;
  return `${initialText} ${startIndex + 1} to ${endIndex} of ${length}`; // customize this line
};

這將使用您在 HTML 中或在組件中配置的任何 pageSize 和長度。

<mat-paginator [length]="dataSource.total"
      [pageSize]="10"
      hidePageSize
      showFirstLastButtons>

如果您的數據返回 50 條記錄，則會顯示以下文本：

顯示用戶 1 到 10，共 50 個

Answer 2

我想出的一種可能的解決方法是添加自定義元素

ngAfterViewInit(): void {  
    // get mat sub component
    const list = this.customPagingItems.nativeElement.getElementsByClassName("mat-paginator-range-actions");
    if (!!list[0]) {    
      // add page info element
      const div = this.renderer.createElement("div");
      this.renderer.addClass(div, "mat-paginator-page-info");
      list[0].appendChild(div);
    }
  }

  ngAfterViewChecked() {
    // update page info because mat-paginator is missing that
    const list = this.customPagingItems.nativeElement.getElementsByClassName("mat-paginator-page-info");
    if (!!list[0]) list[0].innerHTML = `Page ${this.currentPage.toString()} of ${this.totalPages.toString()}`;
  }

元素的順序是通過添加order屬性在 CSS 中完成的，因為它是 display:flex （不需要指令矯枉過正）

Answer 3

可以全局更改“getRangeDisplayText”方法。 例如：

@Injectable()
export class PaginatorIntl extends MatPaginatorIntl {
    constructor(private translateService: TranslateService) {
        super();
    }

    public getRangeLabel = (page: number, pageSize: number, length: number) => {
        return `${this.translateService.translate('Page')} ${page + 1} ${this.translateService.translate('of')} ${Math.ceil(length / pageSize)}`;
    };
}

並在 AppModule（或另一個）中提供它：

@NgModule({
    // ...
    providers: [
        { provide: MatPaginatorIntl, useClass: PaginatorIntl },
        // ...
    ],
    // ...
})
export class AppModule {}

此外，如果全局不需要此更改，您可以在獨特的組件中提供它：

@Component({
    selector: 'app-table',
    templateUrl: './table.component.html',
    styleUrls: ['./table.component.scss'],
    providers: [
        { provide: MatPaginatorIntl, useClass: PaginatorIntl },
    ],
})
export class TableComponent {}