刷新数据和分页器状态答案

【问题标题】：Refresh the data and paginator state刷新数据和分页器状态
【发布时间】：2019-01-07 22:47:35
【问题描述】：

我正在使用 PrimeNG Turbotable <p-table #dt。

根据this dt.reset() 将重置排序、过滤器和分页器状态。我正在尝试找到一种方法来重置分页器状态并重新加载表数据。（不重置排序状态）

这应该发生在那个按钮的(click)上

<p-button icon="fa fa-refresh" (click)="refresh()"></p-button>

我怎样才能做到这一点？

【问题讨论】：

标签： angular typescript primeng primeng-turbotable

【解决方案1】：

在 .html 文件中 -

<p-table #dt [columns]="cols" [value]="result" [paginator]="true" [rows]="10" [(first)]="first">

不要忘记 [(first)] 中的括号

在 .ts 文件中，添加第一个属性：

first = 0

无论你想在哪里重置，调用下面提到的刷新函数

refresh() {
    this.first = 0;
}

【讨论】：

【解决方案2】：

因为你的 HTML 看起来像

<p-table [columns]="cols" [value]="cars" [paginator]="true" [rows]="10" [first]="first">

其中 first 是要显示的第一行的索引，要仅重置分页，您应该将其值设置为 0 ：

refresh() {
    this.first = 0;
}

如果您还想重新加载数据，您只需在 refresh 方法中再次调用您的服务（如果需要）。

【讨论】：

当我将this.first 设置为 0 时，什么也没发生，当我将其设置为 1 时，只有分页器（在 UI 中）更改为第 1 页，但表格的内容没有刷新与第 1 页的数据。
在 Html 页面中我调用 refresh() 函数：<p-button icon="fa fa-refresh" (click)="refresh()"></p-button>，在 ts 文件中：refresh() { this.first = 0; } 当我单击按钮时 - 没有任何反应
请分享该组件的所有 TS 和 HTML 代码或创建 StackBlitz。

【解决方案3】：

试试这个：

refresh() {
    dt.first = 0;
}

【讨论】：

【解决方案4】：

在您的模板中使用 @ViewChild 获取对您的 p 表的引用

<p-table #turboTable [columns]="cols" [value]="cars" [paginator]="true" [rows]="10" >
<p-button icon="fa fa-refresh" (click)="refresh()"></p-button>

在组件文件中

    @ViewChild('turboTable', { static: false }) turboTable: any;

    refresh(){    
       this.turboTable._first = 0;
      //call your get service without filter
    }

【讨论】：

【解决方案5】：

我找到了解决方案，它很乱，但它确实有效。使用 @ViewChild 访问您的 html dom： @ViewChild('dt', { static: false }) dt: any;

我看到有一个属性叫做：sortOrder。它有两个值 1 和 -1。我通过添加强制重新加载排序：

this.dt.sortOrder = - this.dt.sortOrder; this.dt.sortOrder = - this.dt.sortOrder;

【讨论】：