Angular5 - PrimeNG - p-table 组件分页器选择的选项卡在数据重新加载时重置为第一个选项卡

Question

PrimeNG， p-table组件，当数据重新加载时，表重置为第一个分页器选项卡。

重新加载数据时，有什么方法可以阻止该行为并使分页器保留在同一选定选项卡中（例如 2 或 4 或 5 等）？

我每 10 秒重新加载一次数据，方法是在循环中使用 setTimeout() 调用 RestAPI，直到它停留在该页面上。

超文本标记语言

    <p-table #dt [columns]="cols" [value]="dataMarts" [paginator]="true" [rows]="15" [pageLinks]="5" [rowsPerPageOptions]="[5,10,15,20,50,100,200,500,1000]"sortField="Id" resetPageOnSort="false">

参考： https: //www.primefaces.org/primeng/#/table

不确定此行为是否与上述链接的“更改检测”部分中给出的解释有关。

更新：- 这个问题实际上是由属性sortField="Id"引起的，它导致始终显示第一个选项卡。去掉后效果很好。

Answer 1

通过onPage更改页面和first属性时触发的事件，您可以停留在您选择的页面上。

只需添加(onPage)="paginate($event)" [first]="first"到您的p-table相关 TS 代码：

paginate(event) {
    this.first = event.first;
}

其中是您选择的页面的event.first第一个可见行。

参见StackBlitz

编辑

适用于 PrimeNG 5.2.4+