angular - 更新 pageIndex 时,Angular 5 Material Paginator 重置为负值
问题描述
我正在使用 Angular Material 数据表来显示可以添加到的对象列表。将对象添加到数据源时,页面索引会中断并显示负数。我发现解决此问题的唯一方法是将材料分页器的页面索引重置为 0。但是,对分页器的任何进一步更改都会导致 pageIndex 为 -1 或分页器损坏。这是一个例子:
我首先在 Angular Material 数据源中设置新数据,如下所示:
private refreshTable() {
// first we update the length of the paginator with the new length of the datasource data to ensure parity
this.paginator.length = this.dataSource.data.length;
// next we get the current page number so we can return to it later.
let currentPage = this.paginator.pageIndex;
this.tempSubscription2 = this.rrService.getSearchResults(this.searchEnv.outputPayload(true, true)).subscribe(
(data: any) => {
this.extractSBRs(data);
this.dataSource.data = [];
// Here is where the dataSource is reset...
this.dataSource.data = this.sbrs;
this.paginator.length = this.dataSource.data.length;
this.paginator.pageIndex = 0;
this.dataSource.paginator = this.paginator;
console.log('made it this far');
if (this.dataSource.paginator.pageIndex < currentPage) {
console.log('need to return to the current page');
this.paginator.pageIndex = currentPage;
this.paginator._pageIndex = currentPage;
this.dataSource.paginator.pageIndex = currentPage;
this.dataSource.paginator._pageIndex = currentPage;
}
},
(err: any) => {
},
() => {
}
);
}
运行此代码时,第一页的更新很好,因为this.paginator.pageIndex
它被设置为 0。一旦将元素添加到大于零的页面上,表格将显示第一页,分页器的 pageIndex 为 -1, UI 中的分页器如下所示:
注意负指数-9 - 0
。似乎很少有更新 Angular Material Data Table 的示例,甚至更少有关于更新它们如何影响 Angular Material 分页器的进一步说明。如何让分页器转到 0 以外的 pageIndex 而不会出现负索引问题?
我已尝试仅根据此处的建议更新获取的this.paginator
内容。我还尝试更新您可以在上面的代码中看到的内容。ViewChild()
dataSource.paginator
这是我的进口:
import {
AfterContentInit, AfterViewInit, ApplicationRef, ChangeDetectorRef,
Component, OnDestroy, OnInit,
ViewChild
} from '@angular/core';
import { SearchEnvironment } from "../classes/search-environment";
import { SearchFilterDropdown } from "../classes/search-filter-dropdown";
import { ActivatedRoute, Router } from "@angular/router";
import {MatTableDataSource, MatPaginator, MatDialog, MatTable, MatSnackBar} from "@angular/material";
import { RemoteRetrievalService } from "../core/services/remote-retrieval.service";
import { Observable } from "rxjs/Observable";
如何获得返回到 currentPage 索引的所需分页器行为,而不会导致paginator.pageIndex
值中的负索引或项目范围内负值的不良用户体验?
解决方案
奇怪的是他们是如何构建这些组件的。我不确定我的解决方案是否有效,但根据我在该问题中所读到的内容,他们似乎无法同时处理同一摘要周期中的length
更改和pageIndex
更改。
所以我建议length
先更改,然后再更改pageIndex
.
this.paginator.length = this.dataSource.data.length;
this.paginator.pageIndex = 0;
this.dataSource.paginator = this.paginator;
console.log('made it this far');
上面设置了我们知道将在组件上起作用的值,下一部分用于window.setTimeout
在组件有机会更新自身后运行下一组更改。
if (this.dataSource.paginator.pageIndex < currentPage) {
window.setTimeout(()=>{
this.zone.run(()=>{
console.log('need to return to the current page');
this.paginator.pageIndex = currentPage;
this.paginator._pageIndex = currentPage;
this.dataSource.paginator.pageIndex = currentPage;
this.dataSource.paginator._pageIndex = currentPage;
// EDIT: You must then set the datasource paginator back to the newly edited paginator.
this.dataSource.paginator = this.paginator;
});
});
}
您将需要注入NgZone
以在 Angular 的区域内运行代码(用于错误处理)。这只是使用时的一个好习惯window.setTimeout
。
请记住,window
如果您想稍后进行服务器端渲染,Angular Universal 中不存在,但这是一个不同的问题。