时间戳

首页 > 解决方案 > 在 primeNG 表上重置过滤器值

primeng - 在 primeNG 表上重置过滤器值

问题描述

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

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

标签： primeng

解决方案

在这里修复

对于输入字段，只需添加 

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

推荐阅读