Angular Material Table按对象键过滤失效，寻求实现方案

我来帮你搞定这个问题！你现在的代码已经定义了过滤规则，但少了触发过滤的关键一步——Angular Material的MatTableDataSource（我猜你用的是这个）需要明确触发过滤操作，光设置filterPredicate是不够的。

问题根源 #

你只给数据源指定了“怎么判断是否符合过滤条件”，但没有告诉它“现在就用这个条件开始过滤”，所以点击按钮后没有任何效果。另外还要注意：按钮返回的level是字符串类型，而你的Skill里的level应该是数字，直接对比会有类型不匹配的问题。

修改后的完整代码 #

TS代码调整

toggleSkillLevel(level: string){
  console.log('Only show level ' + level + ' skills...');
  
  // 处理"ALL"选项：清空过滤，显示所有技能
  if (level === 'all') {
    this.dataSource.filter = '';
    return;
  }

  // 把字符串类型的level转为数字，避免类型不匹配
  const numericLevel = parseInt(level, 10);
  
  // 定义过滤规则：判断技能的level是否等于目标等级
  this.dataSource.filterPredicate = (data: Skill, filter: string) => {
    return data.level === parseInt(filter, 10);
  };
  
  // 关键：触发过滤操作，把当前选中的等级作为过滤值传入
  this.dataSource.filter = level;
}

关键知识点 #

• filterPredicate：用来定义过滤的逻辑规则，也就是“什么样的数据算符合条件”
• dataSource.filter：用来触发过滤，只要给这个属性赋值，数据源就会用你定义的filterPredicate来筛选数据
• 类型转换：按钮的value是字符串，一定要转成数字再和Skill.level对比，否则会出现2 == "2"看起来相等但严格模式下2 === "2"不成立的问题

这样修改后，点击不同等级的按钮，就能看到filteredData更新成对应等级的技能列表啦！

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