Angular ag-grid问题：关闭芯片恢复默认状态及多芯片过滤实现

我来帮你搞定这两个头疼的问题！咱们一步步来拆解：

问题1：关闭芯片时无法重置AG Grid到默认状态 #

核心是要在芯片移除时，同步更新AG Grid的筛选状态，同时维护好你的搜索词数组。

实现步骤： #

1. 先确保你已经通过gridReady事件拿到AG Grid的API实例：

private gridApi: GridApi;

onGridReady(params: GridReadyEvent) {
  this.gridApi = params.api;
}

2. 在Angular Material Chips的removed事件绑定处理函数：

<mat-chip-list #chipList>
  <mat-chip *ngFor="let filter of activeFilters" (removed)="onFilterRemoved(filter)">
    {{filter}}
    <button matChipRemove>
      <mat-icon>cancel</mat-icon>
    </button>
  </mat-chip>
</mat-chip-list>

3. 在TS中实现移除逻辑，清空或重置筛选：

activeFilters: string[] = [];

onFilterRemoved(filterTerm: string) {
  // 从数组中移除当前筛选词
  this.activeFilters = this.activeFilters.filter(term => term !== filterTerm);
  
  // 如果没有剩余筛选词，直接重置AG Grid到默认状态
  if (this.activeFilters.length === 0) {
    this.gridApi.setQuickFilter('');
  } else {
    // 还有其他筛选词的话，重新应用多筛选逻辑（后面会讲）
    this.applyMultiFilter();
  }
}

这样最后一个芯片被移除时，AG Grid就会回到无筛选的初始状态了。

问题2：通过芯片实现多筛选功能 #

AG Grid的quick filter默认是全局模糊搜索，要实现多条件叠加，有两种实用思路：

思路1：组合关键词实现全局多条件匹配 #

把所有芯片的筛选词用空格拼接，AG Grid的quick filter会自动匹配包含所有关键词的行（逻辑AND）：

// 添加新筛选词时调用
addNewFilter(newTerm: string) {
  if (!this.activeFilters.includes(newTerm)) {
    this.activeFilters.push(newTerm);
    this.applyMultiFilter();
  }
}

// 应用多筛选逻辑
applyMultiFilter() {
  const combinedFilter = this.activeFilters.join(' ');
  this.gridApi.setQuickFilter(combinedFilter);
}

思路2：用FilterModel实现精准多列筛选 #

如果需要针对不同列设置独立筛选条件（比如“姓名包含张三”且“部门属于技术部”），可以用AG Grid的FilterModel来配置：

applyMultiFilter() {
  const filterModel: any = {};
  
  this.activeFilters.forEach(filter => {
    // 假设筛选词格式为「列名:关键词」，拆分后设置对应列的筛选规则
    const [colId, term] = filter.split(':');
    if (colId && term) {
      filterModel[colId] = {
        filterType: 'text',
        type: 'contains',
        filter: term
      };
    }
  });
  
  this.gridApi.setFilterModel(filterModel);
}

对应的，用户输入时需要按「列名:关键词」的格式添加芯片，就能实现精准的多列叠加筛选了。

注意事项： #

• 要确保AG Grid的列配置中开启了筛选（filter: true）
• 如果用FilterModel，建议在gridReady时初始化空的filterModel，避免初始状态异常

如果你的示例代码有特定的配置细节（比如芯片的添加逻辑、列的特殊配置），可以贴出来咱们再细化调整！

内容的提问来源于stack exchange，提问作者Deepanshu Kaushik