0

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

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

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

4

2 回答 2

1

我想出了一个简单、干净的方法，你可以用它ng-template来完成这个。

  1. 将您<tr>的过滤器放入ng-template
  2. 使用and将ng-template两次添加到您的 HTML 中，并分配一个可以切换的值，以便一个模板用于，另一个用于.[ngTemplateOutlet]*ngIftruefalse
  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>

打字稿

...
showFilters = true;
...

clearFilters(dt) {
    this.showFilters = !this.showFilters; // toggle the ng-templates
    dt.reset(); // reset the table
}
于 2020-05-20T17:54:42.837 回答
0

我只是通过引用 ts 组件中的 来手动清除它们。

模板

<p-dropdown #myDropDown (onChange)="dt.filter($event.value, col.field, 'equals')">
</p-dropdown>

打字稿

...
      @ViewChild("myTable", {static: false}) myTable: Table
      @ViewChild("myDropDown", {static: false}) myDropDown: Dropdown
      
      onResetTable() {
        this.myTable.clear()
        this.myDropDown.clear(null);
      }
...
于 2020-09-30T12:42:53.477 回答