一种解决方案是在筛选更新后手动重新分配数据源的数据。在组件中注入 ChangeDetectorRef 并在 filter 发生更改时执行 markForCheck() 命令来通知 Angular 检查更改并重新加载数据。 以下是示例代码：

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { MatTableDataSource } from '@angular/material/table';

@Component({
  selector: 'app-my-table',
  templateUrl: './my-table.component.html',
  styleUrls: ['./my-table.component.css']
})
export class MyTableComponent implements OnInit {

  displayedColumns = ['name', 'age', 'gender'];
  dataSource = new MatTableDataSource();

  constructor(private cdr: ChangeDetectorRef) { }

  ngOnInit(): void {
    // set initial data
    this.dataSource.data = [
      { name: 'Alice', age: 25, gender: 'F' },
      { name: 'Bob', age: 30, gender: 'M' },
      { name: 'Charlie', age: 35, gender: 'M' },
      { name: 'Danielle', age: 40, gender: 'F' },
    ];

    // set filter predicate
    this.dataSource.filterPredicate = (data, filter) => {
      const searchString = filter.trim().toLowerCase();
      return data.name.toLowerCase().indexOf(searchString) !== -1;
    };
  }

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

    // mark for check to ensure data source is updated
    this.cdr.markForCheck();
  }
}

在组件模板中，我们可以通过绑定到一个 input 元素上来实现筛选：

  ...