如何在单击按钮时以编程方式触发刷新primeNG数据表

Question

我有一个在primeNG数据表之外的刷新按钮.如何以编程方式触发刷新数据表？

这样的事情:

<div class="pull-right">
  <button
    id="FilterBtnId"
    (click)="???">
  </button>
                </div>
<p-dataTable
   #datatable
   [value]="datasource"
   [(selection)]="jobs"
   [totalRecords]="totalRecords"
   selectionMode="multiple"
   resizableColumns="true"
   [pageLinks]="10"
   [rows]="10"
   [rowsPerPageOptions]="[10, 25, 50, 100]"
   [paginator]="true"
   [responsive]="true"
   [lazy]="true"
   (onLazyLoad)="getNewDatasource($event)"
   (onRowSelect)="onRowSelect($event)"
   >
     <p-column [style]="{'width':'40px'}" selectionMode="multiple"></p-column>
     <p-column *ngFor="let col of dt.colDefs" [field]="col.field" [header]="col.headerName" [sortable]="true">
     </p-column>
</p-dataTable>

Answer 1

的角形式引导包含一个小窍门,可以用来作为一个解决办法,它由上通过加入重新创建DOM *ngIf来控制其可见性元件

visible: boolean = true;
updateVisibility(): void {
  this.visible = false;
  setTimeout(() => this.visible = true, 0);
}

<button (click)="updateVisibility()">
<p-dataTable *ngIf="visible">

Answer 2

如果表处于惰性模式（通过分页等从服务器动态加载数据...），则此处列出了执行此操作的更好方法（保留页码、排序、过滤器等）。

解决办法是：

在您的组件模板上：

<p-table [value]="yourData" [lazy]="true" (onLazyLoad)="loadUserData($event)" ...

在您的组件代码上：

private lastTableLazyLoadEvent: LazyLoadEvent;

loadUserData(event: LazyLoadEvent): void {
    this.lastTableLazyLoadEvent = event;
    // Lots of beautifull data loading code here 
    // (like calling a server trough a service and so on)...
}

...

当您想要重新加载表时（例如，当您从服务器插入或删除项目时）：

this.loadUserData(this.lastTableLazyLoadEvent);

Answer 3

我们可以在这里有一个小技巧来更新dataTable：我们可以通过在元素上添加* ngIf来控制其可见性来重新创建div，这样它也将更新dataTable。

    visible: boolean = true;
    updateVisibility(): void {
      this.visible = false;
    }
    <button (click)="updateVisibility()">

    <div *ngIf="visible">
        <p-dataTable></p-dataTable>
    </div>