MatPagination：更改 MatPaginator 时，mat-table 不更新项目限制答案

【问题标题】：MatPagination: mat-table does not update item limit when changing MatPaginatorMatPagination：更改 MatPaginator 时，mat-table 不更新项目限制
【发布时间】：2018-04-27 23:25:57
【问题描述】：

我正在尝试对我的表格进行分页。我有Angular Material Table with Pagination(https://material.angular.io/components/table/overview#pagination)的完整实现

由于我使用的是 Angularfire2，所以我的数据源是一个 Observable。

this.items = this.itemsCollection.valueChanges();

我读到我必须使用

dataSource = new MatTableDataSource<Item>;

在表格和分页器之间创建工作连接。

我通过

填充数据源

let subscription = this.items.subscribe(
      newData => { this.dataSource.data = newData });

并通过

更新数据源的分页器

ngAfterViewInit() {
   this.dataSource.paginator = this.paginator;
}

其中 this.paginator 由

定义

@ViewChild(MatPaginator) paginator: MatPaginator

如 Angular Material 的组件文档中所述。

分页器（mat-paginator）工作正常。但是，我的问题是表格没有刷新并继续显示所有值。 'this.paginator' 的初始值也不会传递给表限制。

我找到了一个已知的bug，但我不确定这是否适用于我的问题...

谁能帮帮我？

谢谢你！

【问题讨论】：

标签： angular5 angular-material2 angularfire2

【解决方案1】：

更新

通过在 mat-table 上使用 Angular Pipe，我找到了一个简单的解决方案。我像这样添加了切片管道：

<mat-table #table [dataSource]="dataObservable | async | slice: a:b">

在我的数据组件中，我正在监听 HTML 元素“mat-paginator”的更改事件

(page)="changePage($event)"

在我的组件中，我可以轻松设置切片数据

a = 0;
b = this.limit;
changePage(ev) {
  console.log(  ev );
  this.a = ev.pageIndex * ev.pageSize;
  this.b = this.a + ev.pageSize;
  console.log(this.a);
  console.log(this.b);
}

【讨论】：