重置primeNG表上的过滤器值 [英] Reset filter value on primeNG table

问题描述

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

According to the documentation from https://www.primefaces.org/primeng/#/table the reset method should "Resets sort, filter and paginator state." The problem is that reset table method is not deleting the filters from UI. (although filters field from table.ts is {} after reset)

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

Please see the this where I reproduced it. The code can be seen here Filter the Summary table (see example) by Failed field (or any other field). Press reset. => The table values will be reset but the filter value will still be visible.

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

The example is with the basic table but it's also NOT working with dynamic cols.

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

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

Do you have any ideea on how I can clear the filters from the inputs?

推荐答案

已修复 这里

对于输入字段只需添加

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

其中 是 (input) 方法中发送的字段.

where <field> is the field send in the (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>

这篇关于重置primeNG表上的过滤器值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！