如何让Angular MatTableDataSource过滤器支持子层级数据过滤？

要实现能检索addresses子层级数据的过滤功能，你需要自定义filterPredicate函数，遍历子数组并检查匹配条件。以下是完整实现方案：

完整代码示例 #

1. 自定义过滤逻辑 #

在组件初始化或数据加载完成后，设置filterPredicate：

// 假设已定义对应接口
interface Address {
  street: string;
  city: string;
}

interface User {
  name: string;
  addresses: Address[];
}

// 配置数据源的过滤函数
this.dataSource.filterPredicate = (record: User, filter: string) => {
  // 统一转为小写，避免大小写敏感问题
  const lowerFilter = filter.toLowerCase();
  const lowerName = record.name.toLowerCase();

  // 检查顶层name是否匹配过滤值
  if (lowerName.includes(lowerFilter)) {
    return true;
  }

  // 遍历addresses数组，检查每个地址的street或city是否匹配
  return record.addresses.some(address => {
    const lowerStreet = address.street.toLowerCase();
    const lowerCity = address.city.toLowerCase();
    return lowerStreet.includes(lowerFilter) || lowerCity.includes(lowerFilter);
  });
};

2. 保留原有的过滤触发函数 #

你的applyFilter函数无需修改，继续使用即可：

applyFilter(event: Event) {
  const filterValue = (event.target as HTMLInputElement).value;
  this.dataSource.filter = filterValue.trim().toLowerCase();
}

逻辑说明 #

• 统一转换为小写，确保过滤不区分大小写
• 先判断顶层name是否匹配，满足则直接保留该用户
• 使用数组some方法遍历子层级地址，只要有一个地址的street或city包含过滤值，就保留该用户

这样输入“St West”时，Mason和Jason的地址中都包含该街道名，因此都会被筛选出来。

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