PrimeNG p-table：重置表格過濾器時如何清除 p-dropdown 過濾器值？

Question

我正在使用帶有 header 行的 PrimeNG p-table ，該行同時具有input和p-dropdown過濾器，並且在調用表上的.reset()方法時需要清除input和p-dropdown -dropdown 的過濾器值。

正如其他人指出的那樣（ https://stackoverflow.com/a/51402834/5764320 ），您可以在input元素上使用[value] ，但似乎沒有辦法清除任何非input過濾器值。

如何重置p-dropdown （和其他非input過濾器類型）的過濾器值？

Answer 1

我想出了一種簡單、干凈的方法，您可以使用ng-template來完成此操作。

1. 將具有過濾器的<tr>放入ng-template
2. 使用[ngTemplateOutlet]和*ngIf將ng-template添加到 HTML 兩次，並分配一個可以切換的值，以便一個模板用於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
}

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