如何在Angular Mat Table中添加多过滤器并解决自定义过滤函数报错

报错原因 #

你遇到的该行列参报错主要由以下几个问题导致：

• 未正确定义或导入userData接口类型，TypeScript无法识别该自定义类型
• 初始化MatTableDataSource时未指定对应泛型，默认的filterPredicate参数类型与你声明的userData不匹配
• 未提前初始化filteredValues对象，后续赋值或读取时可能出现属性未定义报错

修复步骤 #

1. 首先定义匹配接口返回字段的类型，建议使用大驼峰命名避免和变量名冲突，可放在当前ts文件顶部或单独的类型文件中导入：

interface UserData {
  employee: string;
  project: string;
  // 其余接口返回的字段按需补充
  [key: string]: any;
}

2. 在类的属性声明处提前初始化相关变量，同时给dataSource指定泛型：

// 类属性声明部分
employeeFilter = new FormControl('');
projectFilter = new FormControl('');
filteredValues: Record<string, string | boolean> = {
  employee: '',
  project: '',
  topFilter: false
};
dataSource: MatTableDataSource<UserData>;

3. 初始化MatTableDataSource时传入泛型，匹配你定义的UserData类型：

this.userdataService.getReports().subscribe(data=>{
  this.userData = data;
  // 指定泛型匹配数据类型
  this.dataSource = new MatTableDataSource<UserData>(this.userData.response);

  this.employeeFilter.valueChanges.subscribe((employeeFilterValue)=> {
    this.filteredValues['employee'] = employeeFilterValue || '';
    this.dataSource.filter = JSON.stringify(this.filteredValues);
  });

  this.projectFilter.valueChanges.subscribe((projectFilterValue) => {
    this.filteredValues['project'] = projectFilterValue || '';
    this.dataSource.filter = JSON.stringify(this.filteredValues);
  });

  this.dataSource.filterPredicate = this.customFilterPredicate();
  this.dataSource.paginator = this.paginator;
});

4. 修正customFilterPredicate方法的类型声明，增加空值兜底逻辑避免运行时报错，改用箭头函数避免内部this指向异常：

customFilterPredicate() {
  const myFilterPredicate = (data: UserData, filter: string): boolean => {
    const searchString = JSON.parse(filter);
    // 空值兜底，避免过滤值为空时调用方法报错
    const employeeFilter = searchString.employee?.toLowerCase() ?? '';
    const projectFilter = searchString.project ?? '';
    
    const employeeFound = data.employee?.toString().trim().toLowerCase().includes(employeeFilter) ?? true;
    const projectFound = data.project?.toString().trim().includes(projectFilter) ?? true;

    return searchString.topFilter ? employeeFound || projectFound : employeeFound && projectFound;
  }
  return myFilterPredicate;
}

如果暂时不想调整类型，也可以把报错行的data:userData改为data:any临时解决类型报错，后续再规范类型定义即可。

内容的提问来源于stack exchange，提问作者Malik Tahir