MatPaigation:Mat-Table更改Matpaginator时不会更新项目限制



我正在尝试为我的表格分页。我有分页(https://material.angular.io/components/table/overview#pagination(的角度材料表的完整实现

由于我正在使用angularfire2我的数据源是可观察的。

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

我读到我必须使用

dataSource = new MatTableDataSource<Item>;

在表格和Paginator之间建立一个工作连接。

我通过

填充数据源
let subscription = this.items.subscribe(
      newData => { this.dataSource.data = newData });

并通过

更新数据源的Paginator
ngAfterViewInit() {
   this.dataSource.paginator = this.paginator;
}

paginator由

定义
@ViewChild(MatPaginator) paginator: MatPaginator

就像在Angular Material的组件中所解释的一样

Paginator(Mat-Paginator(工作正常。但是,我的问题是该表不会刷新并继续显示所有值。" this.paginator"的初始值也未传递到表限制。

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

任何人可以帮我吗?

谢谢您!

update

我通过在MAT台上使用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);
}

最新更新