重置 primeNG 表上的过滤器值

根据来自的文档https://www.primefaces.org/primeng/#/table https://www.primefaces.org/primeng/#/table重置方法应该“重置排序、过滤器和分页器状态”。 问题是重置表方法没有从 UI 中删除过滤器。 （尽管重置后 table.ts 中的过滤器字段为 {}）

请参阅this https://github-vmghz6.stackblitz.io/我在哪里复制了它。 代码可见here https://stackblitz.com/edit/github-vmghz6?file=src/app/app.component.html按“失败”字段（或任何其他字段）过滤“摘要”表（参见示例）。 按重置。 => 表值将被重置，但过滤器值仍然可见。

该示例使用基本表，但它也不适用于动态列。

<ng-template pTemplate="header" let-columns>
<tr>
  <th *ngFor="let col of columns" [pSortableColumn]="col.field">
    {{col.header}}
    <p-sortIcon [field]="col.field"></p-sortIcon>
  </th>
</tr>
<tr>
  <th *ngFor="let col of columns">
    <input pInputText type="text" (input)="dt.filter($event.target.value, col.field, 'contains')">
  </th>
</tr>

您知道如何清除输入中的过滤器吗？

修复here https://stackblitz.com/edit/github-vmghz6-ytjegc?file=src/app/app.component.html

对于输入字段只需添加

[value]="dt.filters[<field>] ? dt.filters[<field>].value : ''" 

where <field>是发送的字段(input) method.

 (input)="dt.filter($event.target.value,<field>, 'contains')"

例如：

    <th>
      <input pInputText type="text" (input)="dt.filter($event.target.value, 'date', 'contains')"
       [value]="dt.filters['date'] ? dt.filters['date'].value : ''">
    </th>