我正在尝试为我的表格分页。我有分页(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 });
并通过
更新数据源的PaginatorngAfterViewInit() {
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);
}