Angular Ag-Grid快速筛选与Material Chips输入合并实现问询

没问题，我帮你把两个输入框整合为一个，用Angular Material Chips展示搜索关键词，同时实时联动Ag-Grid的筛选功能。下面是完整的实现方案，直接替换你现有代码的对应部分就行：

第一步：替换HTML搜索区域代码 #

把原来的两个输入框换成Angular Material的Chip组件，同时保留输入和筛选联动：

<!-- 整合后的搜索与Chips区域 -->
<div class="search-container" style="margin: 1rem 0;">
  <mat-chip-list #chipList aria-label="Search keywords">
    <!-- 已添加的搜索关键词 Chips -->
    <mat-chip
      *ngFor="let keyword of searchKeywords"
      removable="true"
      (removed)="removeKeyword(keyword)"
      color="primary"
      selected
    >
      {{ keyword }}
      <button matChipRemove>
        <mat-icon>cancel</mat-icon>
      </button>
    </mat-chip>

    <!-- 输入框：输入关键词后按回车/逗号添加为Chip -->
    <input
      placeholder="输入搜索关键词..."
      [matChipInputFor]="chipList"
      [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
      (matChipInputTokenEnd)="addKeyword($event)"
    />
  </mat-chip-list>
</div>

<!-- 你的Ag-Grid表格（保留原有配置，新增筛选绑定） -->
<ag-grid-angular
  style="width: 100%; height: 500px;"
  class="ag-theme-alpine"
  [rowData]="rowData"
  [columnDefs]="columnDefs"
  [gridOptions]="gridOptions"
  (gridReady)="onGridReady($event)"
></ag-grid-angular>

第二步：更新组件的TypeScript逻辑 #

处理关键词的添加、删除，以及Ag-Grid的筛选联动：

import { Component } from '@angular/core';
import { MatChipInputEvent } from '@angular/material/chips';
import { ENTER, COMMA } from '@angular/cdk/keycodes';
import { GridReadyEvent, GridApi, GridOptions } from 'ag-grid-angular';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  // 触发Chip添加的按键：回车、逗号
  separatorKeysCodes: number[] = [ENTER, COMMA];
  // 存储所有搜索关键词
  searchKeywords: string[] = [];

  // Ag-Grid配置（新增外部筛选逻辑）
  gridOptions: GridOptions = {
    isExternalFilterPresent: () => this.searchKeywords.length > 0,
    doesExternalFilterPass: (node) => {
      const rowData = node.data;
      // 逻辑：行数据包含任意一个关键词就显示（可改成"包含所有关键词"，把some换成every）
      return this.searchKeywords.some(keyword => {
        // 遍历行的所有字段，检查是否包含关键词（忽略大小写）
        return Object.values(rowData).some(field => 
          field.toString().toLowerCase().includes(keyword.toLowerCase())
        );
      });
    }
  };

  // 你的原有Ag-Grid列定义和行数据（替换成自己的）
  columnDefs = [
    { field: 'make', headerName: '品牌' },
    { field: 'model', headerName: '型号' },
    { field: 'price', headerName: '价格' }
  ];
  rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxster', price: 72000 }
  ];

  private gridApi!: GridApi;

  // 添加关键词到Chips列表
  addKeyword(event: MatChipInputEvent): void {
    const value = (event.value || '').trim();
    // 非空且未重复才添加
    if (value && !this.searchKeywords.includes(value)) {
      this.searchKeywords.push(value);
      // 触发Ag-Grid筛选更新
      this.gridApi?.onFilterChanged();
    }
    // 清空输入框
    event.chipInput!.clear();
  }

  // 移除指定关键词
  removeKeyword(keyword: string): void {
    const index = this.searchKeywords.indexOf(keyword);
    if (index >= 0) {
      this.searchKeywords.splice(index, 1);
      // 触发Ag-Grid筛选更新
      this.gridApi?.onFilterChanged();
    }
  }

  // 保存Ag-Grid实例，用于后续触发筛选
  onGridReady(params: GridReadyEvent) {
    this.gridApi = params.api;
  }
}

第三步：确保导入Angular Material模块 #

在你的组件所属的模块中，添加Chips相关的Material模块，避免报错：

import { MatChipsModule } from '@angular/material/chips';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';

@NgModule({
  imports: [
    // ...其他已有模块
    MatChipsModule,
    MatIconModule,
    MatInputModule
  ]
})
export class YourModule { }

关键逻辑说明 #

1. 输入与Chip联动：输入关键词后按回车或逗号，自动添加为可删除的Chip；点击Chip的删除按钮可移除关键词。
2. Ag-Grid筛选：采用外部筛选逻辑，每次添加/删除关键词时，触发表格重新筛选，确保实时联动。
3. 灵活适配：如果需要更精准的筛选（比如只针对特定列、必须包含所有关键词），只需修改doesExternalFilterPass里的逻辑即可。

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