Angular TypeScript环境下Mat-Table数据表格过滤器失效问题求助

看起来你的Mat-Table过滤没生效主要是几个细节问题，我帮你梳理并修复：

核心问题分析 #

• 过滤函数逻辑冗余：你的customFilterPredicate里不管searchString.topFilter是否存在，都返回同一个searchFound，等于这个分支判断完全没用，而且没有处理其他字段的过滤逻辑
• 字段名不匹配：filteredValues里的键（比如domain、status）和你的IdsGeneralModel模型字段（domaineApplication、statusService）不一致，导致过滤时找不到对应字段
• 搜索范围局限：当前只把搜索框的值绑定到natureDuService字段，没有实现全局搜索多列的需求
• 可能遗漏数据源赋值：你没贴给dataSource.data赋值的代码，如果这一步没做，表格本身就没数据，过滤自然没反应

修复后的完整代码 #

TypeScript 部分 #

displayedColumns: string[] = ['natureDuService', 'domaineApplication', 'statusService', 'descriptionFonctionnelle'];
dataSource: MatTableDataSource<IdsGeneralModel> = new MatTableDataSource();
searchBar = new FormControl('');
// 确保filteredValues的键和模型字段完全匹配
filteredValues = { 
  natureDuService: '', 
  domaineApplication: '', 
  statusService: '',
  descriptionFonctionnelle: ''
};

ngOnInit(): void { 
  // 假设你在这里从服务获取数据并赋值给dataSource
  // this.yourService.getData().subscribe(data => {
  //   this.dataSource.data = data;
  // });

  // 监听搜索框变化，更新所有字段的过滤值（实现全局搜索）
  this.searchBar.valueChanges.subscribe(searchValue => {
    const lowerCaseValue = searchValue.toLowerCase().trim();
    // 给所有需要过滤的字段设置相同的搜索值，实现全局搜索
    Object.keys(this.filteredValues).forEach(key => {
      this.filteredValues[key as keyof IdsGeneralModel] = lowerCaseValue;
    });
    this.dataSource.filter = JSON.stringify(this.filteredValues);
  }); 

  // 设置自定义过滤谓词
  this.dataSource.filterPredicate = this.customFilterPredicate(); 
}

customFilterPredicate(): (data: IdsGeneralModel, filter: string) => boolean {
  return (data: IdsGeneralModel, filter: string) => {
    const searchCriteria = JSON.parse(filter);
    // 检查所有需要过滤的字段是否包含搜索值
    return Object.keys(searchCriteria).every(key => {
      const fieldValue = (data[key as keyof IdsGeneralModel] ?? '').toString().toLowerCase().trim();
      return fieldValue.includes(searchCriteria[key]);
    });
  };
}

HTML 部分（保持原结构即可，需确保表格绑定正确） #

<mat-form-field appearance="outline"> 
  <mat-label>Rechercher</mat-label> 
  <mat-icon style="color: #4D59EF;" matPrefix>search</mat-icon> 
  <input matInput [formControl]="searchBar" placeholder="Rechercher" #input> 
</mat-form-field>

<!-- 确保你的mat-table正确绑定了dataSource和displayedColumns -->
<table mat-table [dataSource]="dataSource">
  <!-- 各列定义示例 -->
  <ng-container matColumnDef="natureDuService">
    <th mat-header-cell *matHeaderCellDef> Nature du Service </th>
    <td mat-cell *matCellDef="let element"> {{element.natureDuService}} </td>
  </ng-container>

  <!-- 其他列同理 -->
  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

关键优化点说明 #

• 字段名对齐：filteredValues的键完全匹配IdsGeneralModel的字段，避免找不到字段的问题
• 全局搜索逻辑：通过遍历所有过滤字段，把搜索值同步到每个字段，实现输入关键词后搜索所有列的效果
• 简化过滤函数：使用every方法检查所有字段是否满足包含搜索值的条件，逻辑更清晰
• 空值处理：用?? ''处理可能为null/undefined的字段值，避免报错

如果你的需求是只针对单个字段过滤（比如只搜natureDuService），那可以简化过滤逻辑：

// 搜索框订阅逻辑改为只更新单个字段
this.searchBar.valueChanges.subscribe(searchValue => {
  this.filteredValues.natureDuService = searchValue.toLowerCase().trim();
  this.dataSource.filter = JSON.stringify(this.filteredValues);
});

// 过滤函数改为只检查单个字段
customFilterPredicate(): (data: IdsGeneralModel, filter: string) => boolean {
  return (data: IdsGeneralModel, filter: string) => {
    const searchCriteria = JSON.parse(filter);
    return data.natureDuService.toString().toLowerCase().trim()
      .includes(searchCriteria.natureDuService);
  };
}

最后别忘了确保你已经给dataSource.data赋值了实际的数据源，这是表格显示和过滤的基础！

内容的提问来源于stack exchange，提问作者Vincent BDL