Angular中使用mat-select实现mat-table过滤功能失效问题咨询

• 问题1：事件绑定和方法名不匹配
  模板中mat-select的selectionChange事件绑定的是filterByProducts($event)，但TS文件中定义的过滤方法名为filter，事件触发时无法调用到正确的过滤逻辑。
  修复：统一方法名，比如把模板中的绑定改为(selectionChange)="filter($event)"
• 问题2：表格绑定的数据源和实际过滤的数据源不一致
  模板中mat-table的[dataSource]绑定的是ltb变量，但TS代码中过滤逻辑操作的是list_brands数据源，过滤操作不会作用到表格实际渲染的数据源上。
  修复：统一数据源绑定，比如将表格绑定改为[dataSource]="list_brands"，或者将过滤逻辑改为操作ltb数据源。
• 问题3：filterPredicate 逻辑错误
  当前filterPredicate中将filtervalue.value.id直接写死在闭包中，后续触发过滤时无法获取最新的选中值，且没有使用框架传入的filter参数，同时如果id为数字类型，和字符串类型的filter值做全等判断会失败。
  修复：调整filterPredicate逻辑：

  filter(filtervalue: any) {
    this.list_brands.filterPredicate = (data, filter: string) => {
      // id为数字类型时需做类型转换
      return data.CaptionCode === Number(filter);
    };
    this.list_brands.filter = filtervalue.value.id.toString();
  }
  

• 问题4：数据源更新逻辑错误
  如果后续修改过数据源赋值逻辑，直接给list_brands重新赋值为新的MatTableDataSource实例，或者直接修改数组而不是修改list_brands.data属性，会导致响应式失效。
  修复：所有更新数据源的操作都修改data属性：

  // 正确写法
  this.list_brands.data = 新数据数组;
  // 错误写法
  // this.list_brands = new MatTableDataSource(新数据数组);
  // this.list_brands.data.push(新条目); // 直接修改数组不会触发变更检测
  

内容的提问来源于stack exchange，提问作者mahdi.gh