angular - 如何同步两个 Angular Material 分页器？

Question

我的设计页面上有两个分页器。当我添加两个分页器时——它们的数据不同步。 https://material.angular.io/components/paginator

https://plnkr.co/edit/w5ZuXnfIgmKW1nWgyf3Y?p=preview

<mat-paginator [length]="length"
               [pageSize]="10">
</mat-paginator>

<mat-paginator [length]="length"
              [pageSize]="10">
</mat-paginator>

如何实现？

Answer 1

这可能是一个老问题，仍然找到了一个现在可行的解决方案:

<mat-paginator #paginatorTop 
               [length]="length"
               [pageSize]="10"
                (page)="paginatorBottom.pageIndex = $event.pageIndex">
</mat-paginator>

<mat-paginator #paginatorBottom 
              [length]="length"
              [pageSize]="10"
              (page)="paginatorTop.pageIndex = $event.pageIndex">
</mat-paginator>

也许这仍然对某人有帮助