typescript 单击按钮时如何以编程方式触发刷新primeNG数据表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/40077150/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to programmatically trigger refresh primeNG datatable when a button is clicked
提问by kimondoe
I have a refresh button that is outside the primeNG datatable. How do I programmatically trigger to refresh the datatable?
我有一个位于 primeNG 数据表之外的刷新按钮。如何以编程方式触发刷新数据表？
something like this:
像这样：
<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>
回答by Mauricio Poppe
The Angular form guidecontains a small trick that could be used as a workaround, it consists on recreating the dom by adding *ngIfto the element to control its visibility
的角形式引导包含一个小窍门，可以用来作为一个解决办法，它由上通过加入重新创建DOM*ngIf来控制其可见性元件
visible: boolean = true;
updateVisibility(): void {
this.visible = false;
setTimeout(() => this.visible = true, 0);
}
<button (click)="updateVisibility()">
<p-dataTable *ngIf="visible">
回答by Nitin Jangid
We can have small trick to update the dataTable here: we can recreating the div by adding *ngIf to the element to control its visibility by this it will update dataTable also.
我们可以在这里更新 dataTable 的小技巧：我们可以通过将 *ngIf 添加到元素来重新创建 div 以控制其可见性，它也会更新 dataTable。
visible: boolean = true;
updateVisibility(): void {
this.visible = false;
}
<button (click)="updateVisibility()">
<div *ngIf="visible">
<p-dataTable></p-dataTable>
</div>
回答by jmfvarela
If you refresh the list in the component, the table refresh automatically. Example after confirm a delete operation:
如果刷新组件中的列表，表格会自动刷新。确认删除操作后的示例：
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();
});
}
});
}
}
