angular - 同一数据源的 2 个 mat-paginator

Question

我有一个 mat-table，每页最多可以显示 100 个条目。起初，我在底部有一个垫子分页器，效果很好。现在我被要求在表格顶部设置一个分页器，在表格底部设置另一个分页器，因此如果用户正在寻找位于顶端。

问题是两个分页器必须链接到同一个数据源。
我尝试为每个 ID 提供不同的 ID，使用 ViewChild 获取它们并将它们分配给相同的数据源，但它仅适用于其中之一。

main.component.ts:

    flights: Flight[] =[];
    dataSource = new MatTableDataSource<Flight>(this.flights);
    @ViewChild('PAGINATOR') paginator: MatPaginator;
    @ViewChild('OTROPAGINATOR') paginatorOtro: MatPaginator;

main.component.html:

   <mat-paginator #PAGINATOR (page)="pageEvent = handlePage($event)" 
   [length]="length" [pageSizeOptions]="[25, 50, 100]" showFirstLastButtons> 
   </mat-paginator>

   <table mat-table ...> ... </table>

  <mat-paginator #OTROPAGINATOR (page)="pageEvent = handlePage($event)" 
  [length]="length" [pageSizeOptions]="[25, 50, 100]" showFirstLastButtons> 
  </mat-paginator>

将分页器链接到数据源:

    this.dataSource = new MatTableDataSource<Flight>(this.flights);
    this.dataSource.paginator = this.paginator;
    this.dataSource.paginator = this.paginatorOtro;

有人可以指导我吗？

Answer 1

我找不到为同一个数据源设置 2 个分页器的方法。我这样做的方法是使用数据源的副本设置第二个分页器，然后根据另一个分页器的更改移动每个分页器。

此外，我无法直接设置页面索引或每页属性(表格未刷新)，因此所有移动都是通过一些逻辑和分页器方法(如 previousPage() 或 lastPage())实现的。

唯一的限制是底部的分页器不能更改每页的项目，因为没有一种方法可以让我控制该属性。

你可以看到结果 here .感谢 FabianKüng有关使用 2 个数据源并同步两个分页器的解决方案。

我希望这对某人有用。