如何重置PrimeNG Table的过滤值？技术咨询

针对你遇到的PrimeNG表格过滤值无法重置的问题，以下几种可行方案：

1. 使用Table组件内置的clearFilters()方法 #

PrimeNG的p-table组件提供了clearFilters()方法，可一键清空所有过滤器状态。结合你模板中的#dtadd模板引用变量，可直接在模板或组件类中调用：

模板中直接添加重置按钮 #

在表格合适位置（比如表头行或表格外部）添加重置按钮：

<!-- 示例：在表格上方添加重置按钮 -->
<button pButton type="button" label="重置所有过滤" (click)="dtadd.clearFilters()"></button>

<!-- 你的p-table代码 -->
<p-table #dtadd [value]="gridList" [alwaysShowPaginator]="false" [rows]="5" [paginator]="true" [(first)]="add"
[(selection)]="customCodeGroupModel.codeGrouingTypeID" [responsive]="true">
  <!-- 表头、内容模板省略 -->
</p-table>

注意事项 #

如果你的过滤输入框没有绑定数据模型（如你最初的代码），调用clearFilters()后需要手动清空输入框的值。可以通过给输入框添加ID，在组件类中获取元素并清空：

resetFilters() {
  this.dtadd.clearFilters();
  // 清空Code Set输入框
  document.getElementById('codeSetInput')!.value = '';
  // 清空Code Type输入框
  document.getElementById('codeTypeInput')!.value = '';
}

同时记得给输入框设置唯一ID：

<input id="codeSetInput" pInputText type="text" style="width:150px"
       (input)="dtadd.filter($event.target.value, 'codeSetDescription', 'contains')">

2. 绑定ngModel实现双向同步（推荐） #

你之前尝试用ngModel但未生效，问题在于没有正确结合ngModelChange事件同步过滤器状态。正确的实现方式如下：

步骤1：组件类定义过滤变量 #

在组件的.ts文件中声明对应字段的过滤变量：

import { Component, ViewChild } from '@angular/core';
import { Table } from 'primeng/table';

@Component({
  // 组件元数据省略
})
export class YourComponent {
  @ViewChild('dtadd') dtadd!: Table;
  // 定义过滤变量
  codeSetFilter: string = '';
  codeTypeFilter: string = '';
  // 其他变量（gridList等）省略

  // 重置方法
  resetFilters() {
    this.codeSetFilter = '';
    this.codeTypeFilter = '';
    // 同步清空过滤器状态
    this.dtadd.clearFilters();
  }
}

步骤2：模板中绑定ngModel和ngModelChange #

将输入框与组件变量绑定，并用ngModelChange替代input事件触发过滤：

<ng-template pTemplate="header" let-columns>
  <tr>
    <th [pSortableColumn]="'codeSetDescription'" style="width:25%;">
      Code Set
      <p-sortIcon [field]="'codeSetDescription'"></p-sortIcon>
    </th>
    <th [pSortableColumn]="'codeTypeName'" style="width:25%;">
      Code Type
      <p-sortIcon [field]="'codeTypeName'"></p-sortIcon>
    </th>
    <th style="width:7%;">Action</th>
  </tr>
  <tr>
    <th>
      <input pInputText type="text" style="width:150px"
             [(ngModel)]="codeSetFilter"
             (ngModelChange)="dtadd.filter($event, 'codeSetDescription', 'contains')">
    </th>
    <th>
      <input pInputText type="text" style="width:150px"
             [(ngModel)]="codeTypeFilter"
             (ngModelChange)="dtadd.filter($event, 'codeTypeName', 'contains')">
    </th>
    <th>
      <button pButton type="button" label="重置" (click)="resetFilters()"></button>
    </th>
  </tr>
</ng-template>

这种方式下，清空组件变量时输入框会自动同步清空，同时调用clearFilters()确保表格过滤器状态重置。

3. 单独重置单个过滤器 #

如果只需要重置某一个字段的过滤值，可直接调用filter方法传入空字符串：

resetCodeSetFilter() {
  this.codeSetFilter = '';
  this.dtadd.filter('', 'codeSetDescription', 'contains');
}

模板中绑定按钮即可：

<button pButton type="button" label="重置Code Set" (click)="resetCodeSetFilter()"></button>

内容的提问来源于stack exchange，提问作者DILEEP KUMAR