Angular Material 设计上的分页 - 显示页码或删除行数

Question

Angular6/7，Material设计。

由于我无法访问项目总数，因此项目计数无关紧要（屏幕截图中的框）。

如何完全删除项目计数？或者显示我当前所在的页面而不是项目数？

<mat-paginator
    itemsPerPageLabel="Items per page"
    (page)="changePage()"
    [length]="resultsLength"
    [pageSizeOptions]="[10, 100]">
</mat-paginator>

Answer 1

通过在全局中插入删除范围标签CSS

.mat-paginator-range-label {
    display: none;
}

改为插入页码（当然基于您的 API - 您可能没有页面信息！）通过插入您的组件

ngAfterViewChecked() {
        const list = document.getElementsByClassName('mat-paginator-range-label');
        list[0].innerHTML = 'Page: ' + this.page.toString();
}

当然还要删除上面的 CSS 规则！

Paginator 现在看起来像这样

Answer 2

我刚刚修改了 Johan Faerch 的解决方案以更适合您的问题。

Create 方法有两个参数，一个用于 matpaginator，另一个用于 HTMLCollectionOf

列表

paginatorList: HTMLCollectionOf<Element>;

onPaginateChange(paginator: MatPaginator, list: HTMLCollectionOf<Element>) {
     setTimeout((idx) => {
         let from = (paginator.pageSize * paginator.pageIndex) + 1;

         let to = (paginator.length < paginator.pageSize * (paginator.pageIndex + 1))
             ? paginator.length
             : paginator.pageSize * (paginator.pageIndex + 1);

         let toFrom = (paginator.length == 0) ? 0 : `${from} - ${to}`;
         let pageNumber = (paginator.length == 0) ? `0 of 0` : `${paginator.pageIndex + 1} of ${paginator.getNumberOfPages()}`;
         let rows = `Page ${pageNumber} (${toFrom} of ${paginator.length})`;

         if (list.length >= 1)
             list[0].innerHTML = rows; 

     }, 0, paginator.pageIndex);
}

如何调用这个方法？你可以在 ngAfterViewInit()

上初始化它

ngAfterViewInit(): void {
   this.paginatorList = document.getElementsByClassName('mat-paginator-range-label');

   this.onPaginateChange(this.paginator, this.paginatorList);

   this.paginator.page.subscribe(() => { // this is page change event
     onPaginateChange(this.paginator, this.paginatorList);
   });
}

将此方法包含在您的 css 文件中（注意：不要包含在主 styles.css 文件中）
```
.mat-paginator-range-label {
    display: none;
}
```
除了单击 mat paginator 上的导航按钮之外，您可以在需要更改页码详细信息的任何地方调用 onPaginateChange(this.paginator, this.paginatorList) 函数。

结果如下所示

Angular Material 设计上的分页 - 显示页码或删除行数

Pagination on Angular Material Design - Show page numbers or remove the row count

angular-material2

angular6