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

Posted 2023-03-13

【中文标题】单击按钮时如何以编程方式触发刷新primeNG数据表

【英文标题】：How to programmatically trigger refresh primeNG datatable when a button is clicked

【发布时间】：2017-02-25 21:24:33

【问题描述】：

我有一个在 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>

【参考方案1】：

Angular form guide 包含一个小技巧，可以用作解决方法，它包括通过将*ngIf 添加到元素来控制其可见性来重新创建 dom

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


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

【讨论】：

很棒又简单！

起初我不敢使用这个解决方案，因为它对我来说似乎很简单，这简直令人难以置信，它是有史以来最简单和最好的解决方案，哈哈，我只是想知道为什么 primeface 不提供一种可以解决问题的方法 =/

谢谢我使用了它并且它有效，但我得到了 ExpressionChangedAfterItHasBeenCheckedError。 – P. Huhn 昨天

在弹出窗口中使用这个技巧会导致快速隐藏/显示体验，这让我很不愉快。

这可行，但不幸的是会导致“闪烁”，表格消失并以正确的大小重新出现，这可能是一个不错的权衡，但请注意。

【参考方案2】：

我们可以在这里更新数据表的小技巧： 我们可以通过向元素添加 *ngIf 来重新创建 div 以控制其可见性，这样它也会更新 dataTable。

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

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

【参考方案3】：

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

解决办法是：

在您的组件模板上：

<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);

【参考方案4】：

如果刷新组件中的列表，表格会自动刷新。 确认删除操作后的示例：

import  Component  from '@angular/core';
import  Interface  from '../..//model/interface.model'
import  InterfaceService  from '../../service/interface.service'
import  ButtonModule  from 'primeng/primeng';
import  ConfirmDialogModule, ConfirmationService  from 'primeng/primeng';

@Component(
    templateUrl: './interfaces.component.html'
)
export class InterfacesComponent 

    interfaces: Interface[];

    constructor(
        private interfaceService: InterfaceService,
        private confirmationService: ConfirmationService
    )  

    ngOnInit() 
        this.find();
    

    find() 
        this.interfaceService.query().then(interfaces => this.interfaces = interfaces);
    

    confirm(id: number) 
        this.confirmationService.confirm(
            message: 'Are you sure that you want to delete this record?',
            accept: () => 
                this.interfaceService.delete(id).then((_interface) => 
                    this.find();
                );            
            
        );
    

【参考方案5】：

请尝试为我工作

refreshTable()this.loadCustomers(this.lastEvent);

loadCustomers(event: LazyLoadEvent)  this.lastEvent = event; this.loading = true;  this.service.getAll(event).subscribe( data =>  this.loading = false; this.tableData = data['results']; , error =>  this.loading = false;  ); 

【参考方案6】：

Rendere2 可能会有所帮助

@ViewChild('table') table: Table;

constructor(private renderer: Renderer2) 


refreshTable()
    const dataTableRef = this.renderer.selectRootElement(this.table.el.nativeElement, true);
    dataTableRef.focus();

dataTableRef.focus() 将刷新网格