带有两个分页器的 Angular 一张桌子答案

【问题标题】：Angular one table with two paginators带有两个分页器的 Angular 一张桌子
【发布时间】：2020-08-13 08:46:04
【问题描述】：

我正在从基于材料库的组件构建 Angular GUI： https://material.angular.io/

我有一个带有表格和底部分页器的页面。我想在页面顶部提供相同的分页设置。但是该表只允许一个分页器实例：

get paginator (): MatPaginator | zero;
set paginator (paginator: MatPaginator | null);
private _paginator;

我找到了许多解决方案，用于在一个页面上使用自己的分页器的两个表格。但事实并非如此。

那么，有没有办法将 2 个分页器连接到一个表中？

谢谢， MB

【问题讨论】：

标签： angular components frontend composition

【解决方案1】：

这就是我所做的。它有效，但我不知道它是否是性能障碍

<mat-paginator [pageSize]="10" #primaryPaginator [pageSizeOptions]="pageOptions"></mat-paginator>

<mat-paginator [pageSize]="primaryPaginator.pageSize"
               [length]="primaryPaginator.length"
               [pageIndex]="primaryPaginator.pageIndex"
               [showFirstLastButtons]="primaryPaginator.showFirstLastButtons"
               [pageSizeOptions]="primaryPaginator.pageSizeOptions"
               (page)="primaryPaginator.pageIndex=$event.pageIndex;primaryPaginator.pageSize=$event.pageSize;primaryPaginator.page.emit($event)"

【讨论】：

【解决方案2】：

考虑到这是您的主要分页器：

<mat-paginator [length]="totalRecords" [pageSize]="10" [pageSizeOptions]="[10, 25, 50]"></mat-paginator>

您可以添加第二个分页器，其属性绑定到第一个分页器（这将确保当第一个分页器更改时，更改将反映到第二个分页器）并连接到它的 (page) 事件以确保更改将反映在第一个分页器上（也反映到数据源上）：

<mat-paginator (page)="syncMainPaginator($event)" [pageSize]="paginator.pageSize" [pageIndex]="paginator.pageIndex"
  [length]="paginator.length" [pageSizeOptions]="paginator.pageSizeOptions"></mat-paginator>

在您的 .ts 文件中，您需要抓取第一个分页器（如果有更多分页器，则通过 id 抓取组件）：

  @ViewChild(MatPaginator)
  paginator: MatPaginator;

并定义同步两个分页器的功能：

  syncMainPaginator(event: PageEvent) {
    this.paginator.pageIndex = event.pageIndex;
    this.paginator.pageSize = event.pageSize;
    this.paginator.page.emit(event);
  }

确保主（第一个）分页器附加到 MatTableDataSource。

注意：我使用的是自定义 DataSource 类，因此这可能需要一些调整，但应该让您正确了解如何实现这一点。

【讨论】：