Angular mat-table绑定筛选事件无效果无控制台报错如何解决

问题原因&解决方案 #

1. 数据源类型错误 #

你当前将dataSource声明为普通数组类型，而Angular Material的mat-table筛选能力是内置在MatTableDataSource类中的，普通数组没有对应的筛选处理逻辑，你给普通数组动态添加filter属性不会触发任何筛选动作，也不会抛出报错（JS支持动态为对象添加自定义属性）。

修改TS代码如下：
首先导入依赖：

import { MatTableDataSource, MatSort } from '@angular/material/table';
import { ViewChild, AfterViewInit } from '@angular/core';

修改数据源声明：

// 替换原来的dataSource: any[] = []
dataSource = new MatTableDataSource<any>();
@ViewChild(MatSort) sort!: MatSort;

// 如果你用到排序，需要在ngAfterViewInit中绑定sort实例
ngAfterViewInit() {
  this.dataSource.sort = this.sort;
}

// 拿到后台返回的列表数据时，赋值给dataSource的data属性
getTableData() {
  this.yourApiService.getList().subscribe(res => {
    this.dataSource.data = res; // 不要直接赋值给this.dataSource
  })
}

// 你的筛选方法可以不用改，直接沿用
applyFilter(filterValue: string) {
  filterValue = filterValue.trim();
  filterValue = filterValue.toLowerCase();
  this.dataSource.filter = filterValue;
}

2. 嵌套属性需要自定义筛选逻辑 #

你的表格数据存在嵌套结构（比如用户姓名、邮箱都存在row.user下），MatTableDataSource默认的筛选逻辑只会遍历对象的一级属性，无法匹配到嵌套层级的字段值，需要自定义filterPredicate来覆盖默认筛选规则：

在数据源初始化后添加自定义筛选逻辑：

ngOnInit() {
  this.dataSource.filterPredicate = (data: any, filter: string) => {
    // 把所有需要参与筛选的字段值拼接为字符串，转小写后匹配关键词
    const matchStr = [
      data.user?.firstName,
      data.user?.lastName,
      data.user?.email,
      data.user?.phone,
      data.createAt,
      data.ticketDepartment?.name,
      data.subject,
      data.issueDetails,
      TicketStatus[data.status]
    ].join(' ').toLowerCase();
    return matchStr.includes(filter);
  }
}

3. 修复HTML结构问题 #

你在mat-table内部用额外的<div>包裹了前几个列的ng-container，mat-table的直接子元素只识别列定义、行定义相关组件，多余的div可能导致列渲染异常，建议删除这个无用的div包裹。

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