在 primeNG 表上重置过滤器值答案

【问题标题】：Reset filter value on primeNG table在 primeNG 表上重置过滤器值
【发布时间】：2022-01-07 07:06:19
【问题描述】：

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

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

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

<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

【解决方案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>

【讨论】：

这对我的输入有所帮助。谢谢。 p-dropdowns 怎么能做到这一点？
@M Akin，请参阅我的回答，了解如何为 p-dropdown 完成此操作：stackoverflow.com/a/61919691/5764320

【解决方案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 代码上尝试过）

【讨论】：

嗨。我想过这个，但这是一个带有静态列的小表的解决方案。如果列和过滤器是动态生成的，或者表中有 20 列，那么我无法将输入绑定到 component.ts 中声明的变量。我需要一个可以应用于大型表的通用解决方案，其中一些具有动态列。
如果您需要使其动态化 - 只需使用 string[] 而不是硬编码变量集。

【解决方案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() 将完全重置所有排序、过滤和分页。

【讨论】：

【解决方案4】：

我的解决方案：

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

因为dt.filter() 的值为空意味着清除过滤器。希望它能正常工作...

【讨论】：

【解决方案5】：

如果您使用p-calendar 作为过滤器输入而不使用ngmodel：

<p-calendar pInputText #pCalendar1 *ngSwitchCase="'createdDate'"
(onSelect)="dt.filter($event, 'createdDate', 'customDateFilter')" class="p-column-filter form-control pCalendar" [dateFormat]="pCalendarFormat"
    [selectOtherMonths]="true" yearRange="0000:3000" [yearNavigator]="true"
    [monthNavigator]="true" [readonlyInput]="true"
    [value]="dt.filters[col.field] ? datePipe.transform(dt.filters[col.field].value, dateFormat) : ''">
</p-calendar>

@ViewChild('pCalendar1') calendar1: Calendar

clearFilter() {
    this.table.reset();
    if (this.calendar1 && this.calendar1.inputFieldValue) {
      this.calendar1.value = '';
      this.calendar1.inputFieldValue = '';
      this.calendar1.updateInputfield();

    }
}

【讨论】：