html - PrimeNG p 表 : How to clear p-dropdown filter values when resetting table filters?

Question

我正在使用 PrimeNG p-table ，其标题行同时具有 input 和 p-dropdown 过滤器，并且需要清除过滤器在表格上调用 .reset() 方法时，input 和 p-dropdown 的值。

正如其他人指出的( https://stackoverflow.com/a/51402834/5764320 )，您可以在 input 元素上使用 [value] ，但似乎没有办法清除任何非输入过滤器值。

如何重置 p-dropdown(以及其他非input 过滤器类型)的过滤器值？

Answer 1

我想出了一个简单、干净的方法，你可以使用 ng-template来实现这一点。

1. 输入您的<tr>将您的过滤器设置为 ng-template
2. 添加 ng-template使用[ngTemplateOutlet]到您的HTML两次和*ngIf并分配一个可切换的值，以便将一个模板用于 true另一个为 false .
3. 清除过滤器时切换分配给模板的值。

这会“清除”过滤器，因为当切换模板时，Angular 会从 DOM 中完全添加和删除模板的 HTML，这意味着之前使用的任何值都将不再存在。

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>

typescript

...
showFilters = true;
...

clearFilters(dt) {
    this.showFilters = !this.showFilters; // toggle the ng-templates
    dt.reset(); // reset the table
}