PrimeNG p-table：如何在重置 table 过滤器时清除 p-dropdown 过滤器值？

Question

我正在将 PrimeNG p-table 与 header 行一起使用，该行同时具有 input 和 p-dropdown 过滤器，需要清除 [=14= 的过滤器值] 和 p-dropdown 在 table.

上调用 .reset() 方法时

正如其他人指出的那样 ()，您可以在 input 元素上使用 [value]，但似乎没有办法清除任何非 input 过滤值。

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

Answer 1

我想出了一个简单、干净的方法，您可以使用 ng-template 来完成此操作。

将具有过滤器的 <tr> 放入 ng-template
使用 [ngTemplateOutlet] 和 *ngIf 将 ng-template 添加到您的 HTML 两次，并分配一个被切换的值，以便一个模板用于 true 另一个是 false.
清除过滤器时切换分配给模板的值。

这会“清除”过滤器，因为 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
}

Answer 2

我只是通过引用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);
      }
...

PrimeNG p-table：如何在重置 table 过滤器时清除 p-dropdown 过滤器值？

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

html

typescript

primeng

angular

primeng-table

HTML

TypeScript