Angular框架下mat-table表格自定义过滤器功能失效问题咨询

问题根因排查 #

以下是过滤器不生效的核心问题：

• 核心问题1：没有使用MatTableDataSource包装数据源
  filter、filterPredicate都是Angular Material表格数据源MatTableDataSource的内置属性，你直接把接口返回的普通数组赋值给httpdata，普通数组没有这两个属性，过滤逻辑自然不会触发。
• 核心问题2：初始化时序错误
  你在ngOnInit中同步调用了formSubscribe、getFormsValue，但此时http异步请求还未返回，httpdata还是undefined，给undefined赋值属性会直接抛出运行时错误，过滤逻辑没有成功绑定。
• 边缘问题：空值未兼容
  如果输入框清空时nameValue为null/空字符串，调用toLowerCase()会抛出异常，且空值场景下应该返回所有数据。

修正方案 #

1. 修正TS代码 #

import { MatTableDataSource } from '@angular/material/table'; // 先导入依赖

// 声明httpdata为MatTableDataSource类型
httpdata!: MatTableDataSource<any>;
private _jsonURL = 'assets/mytestusers.json';

ngOnInit() {
    this.http.get(this._jsonURL).subscribe((data) => this.displaydata(data));
}
displaydata(data: Object) {
    // 用MatTableDataSource包装返回的数组
    this.httpdata = new MatTableDataSource(data as any[]);
    // 等数据源初始化完成后再绑定过滤逻辑
    this.formSubscribe();
    this.getFormsValue();
}
displayedColumns: string[] = ['position', 'name', 'username', 'email', 'address', 'action'];

filterValues = {
    name: ''
};

filterForm = new FormGroup({
    name: new FormControl('') // 给默认空值避免null
});

get name() {
    return this.filterForm.get('name');
}
formSubscribe() {
    if (this.name != null) {
        this.name.valueChanges.subscribe(nameValue => {
            this.filterValues['name'] = nameValue || ''; // 兼容null值
            this.httpdata.filter = JSON.stringify(this.filterValues);
        });
    }
}

getFormsValue() {
    this.httpdata.filterPredicate = (data: any, filter: string): boolean => {
        let searchString = JSON.parse(filter);
        // 空搜索值直接返回所有数据
        if (!searchString.name) return true;
        return data.name.toString().trim().toLowerCase()
          .includes(searchString.name.toLowerCase());
    };
    this.httpdata.filter = JSON.stringify(this.filterValues);
}

2. 确认HTML表格绑定正确 #

确保你的mat-table的dataSource绑定的是httpdata，示例：

<table mat-table [dataSource]="httpdata">
  <!-- 列定义省略 -->
</table>

修改后过滤器即可正常工作。

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