Question

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

请参阅我在其中复制的this。可以看到该代码here 按“失败”字段（或任何其他字段）过滤“摘要”表（请参见示例）。按重置。 =>表值将被重置，但过滤器值仍将可见。

该示例用于基本表，但不适用于动态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>

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

Answer 1

修复了here

对于输入字段，只需添加

[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代码）

Answer 3

扩展有关p-multiSelects的问题...您可以通过绑定ngModel属性来检查数据表过滤器的值来解决此问题。您也可以对输入字段使用相同的方法。

对于输入字段：

<input pInputText placeholder='Search' 
                  type='text'
                  [ngModel]="dt.filters['foobar']? dt.filters['foobar'].value : ''" 
                  (input)="dt.filter($event.target.value, 'foobar', 'contains')"
>

对于p-multiSelect下拉列表：

<p-multiSelect appendTo="body" 
               [options]="[{label: 'Foo', value: 'Foo'}, {label: 'Bar', value: "Bar'}]" 
               [ngModel]="dt.filters['foobar']? dt.filters['foobar'].value: []" 
               (onChange)="dt.filter($event.value, 'foobar', 'in')">
</p-multiSelect>

最后，调用Table.reset()将完全重置所有排序，过滤和分页。

Answer 4

我的解决方案：

(onChange)="value = $event.value === 'Reset Value' ? '' : 
 $event.value;
datatable.filter(value, column.field, column.filterMatchMode); 
doFilter($event.value)"

由于dt.filter()的值为空，表示清除过滤器。希望它起作用...

在primeNG表上重置过滤器值

4 个答案: