一张带有两个分页器的角形桌子

Question

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

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

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

我在一页上有自己的分页器的两个表中找到了许多解决方案。但这不是这种情况。

所以，有没有办法将2个分页器连接到一个表中？例如，一些镜像黑客？

谢谢，MB

Answer 1

考虑到这是您的主要任务：

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

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

<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类，因此这可能需要一些调整，但是应该为您提供有关如何实现此目标的正确思路。