重置primeNG表上的过滤器值

Question

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

请参阅此，我复制它。可以在此处查看代码 按失败字段（或任何其他字段）过滤汇总表（参见示例）。按复位。=> 表值将被重置，但过滤器值仍将可见。

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

<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>

您对我如何从输入中清除过滤器有任何想法吗？

Answer 1

修复了这里

对于输入字段，只需添加

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

方法中<field>发送的字段在哪里(input)。

 (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>

Answer 2

如果您只是将 ngModel 添加到您的输入中，例如：

<input pInputText type="text" [(ngModel)]="dt22" (input)="dt.filter($event.target.value, 'date', 'contains')">

在代码中，您将定义：

  dt22:string = '';

然后 onClick 将是：

onClick() {
    this.dt22 = '';
    this.table.reset();
  }

我知道这将需要额外的代码，但这肯定会起作用（刚刚尝试了您的 stackblitz 代码）