[英]PrimeNG p-table: How to clear p-dropdown filter values when resetting table filters?
我正在使用带有 header 行的 PrimeNG p-table
,该行同时具有input
和p-dropdown
过滤器,并且在调用表上的.reset()
方法时需要清除input
和p-dropdown
-dropdown 的过滤器值。
正如其他人指出的那样( https://stackoverflow.com/a/51402834/5764320 ),您可以在input
元素上使用[value]
,但似乎没有办法清除任何非input
过滤器值。
如何重置p-dropdown
(和其他非input
过滤器类型)的过滤器值?
我想出了一种简单、干净的方法,您可以使用ng-template
来完成此操作。
<tr>
放入ng-template
[ngTemplateOutlet]
和*ngIf
将ng-template
添加到 HTML 两次,并分配一个可以切换的值,以便一个模板用于true
,另一个用于false
。这会“清除”过滤器,因为 Angular 在切换模板时从 DOM 中完全添加和删除模板的 HTML,这意味着以前使用的任何值都将不再存在。
这假设您正在使用<p-table #dt...>
以便可以通过单击按钮来传递dt
。
注意:留下一些与p-table
相关的部分和属性以保持清洁。
<ng-template [ngTemplateOutlet]="FilterRow" *ngIf="showFilters"></ng-template>
<ng-template [ngTemplateOutlet]="FilterRow" *ngIf="!showFilters"></ng-template>
<!-- Whatever your 'tr' content is goes inside this template, this is an abbreviated example -->
<ng-template #FilterRow>
<tr>
<th class="text-center">
<button (click)="clearFilters(dt)">Reset</button>
</th>
<th>
<p-dropdown (onChange)="dt.filter($event.value, col.field, 'equals')"></p-dropdown>
</th>
<th>
<input pInputText type="text" (input)="dt.filter($event.target.value, col.field,'contains')"/>
</th>
</tr>
</ng-template>
...
showFilters = true;
...
clearFilters(dt) {
this.showFilters = !this.showFilters; // toggle the ng-templates
dt.reset(); // reset the table
}
我只是通过引用 ts 组件中的 来手动清除它们。
模板
<p-dropdown #myDropDown (onChange)="dt.filter($event.value, col.field, 'equals')">
</p-dropdown>
TypeScript
...
@ViewChild("myTable", {static: false}) myTable: Table
@ViewChild("myDropDown", {static: false}) myDropDown: Dropdown
onResetTable() {
this.myTable.clear()
this.myDropDown.clear(null);
}
...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.