Angular Material Table动态组件过滤异常问题求助

问题原因 #

Angular Material Table默认的filterPredicate只会遍历数据源对象的直接可枚举属性，而通过注入方式传递数据的动态组件，其展示内容并未作为数据源对象的属性存在，导致过滤逻辑无法捕获这部分内容，最终出现过滤失效的情况。

解决方案 #

1. 自定义过滤逻辑 #

重写filterPredicate，手动指定所有需要参与过滤的字段，包括注入式动态组件对应的数据源字段。假设注入式组件展示的是item.injectedData字段，示例代码如下：

this.dataSource.filterPredicate = (data: YourDataType, filter: string) => {
  // 合并所有需要过滤的字段内容
  const filterContent = [
    data.fixedColumn, // 固定组件对应的字段
    data.inputBoundColumn, // 输入式动态组件对应的字段
    data.injectedData // 注入式动态组件对应的字段
  ].join(' ').toLowerCase();
  
  return filterContent.includes(filter.toLowerCase());
};

2. 确保过滤触发逻辑正常 #

当过滤关键词变化时，正确赋值dataSource.filter以触发自定义过滤逻辑：

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

3. 验证动态组件数据关联 #

确认注入式动态组件使用的数据直接来自当前行的数据源对象，而非外部独立数据，保证过滤逻辑能访问到对应内容。

内容的提问来源于stack exchange，提问作者DeuceyPoo's Dad