Javascript 我们如何在ngFor中为angular中材质表中的每一列提供过滤功能？

由于我的列名和相应的数据是在ngFor中填充的，我如何传递一个单独的过滤器行来过滤角材质表中每列的数据

---

筛选器行应位于显示各种列名的标题行下方。

如果只想使用筛选器特定列，则需要像这样覆盖filterPredicate

import {MatTableDataSource} from '@angular/material';

export interface Element {
      id: string;
      name: number;
      age:number;
}
const yourDataArray: Element[] = [
      {id: 1, name: 'Ali', age:23},
      {id: 2, name: 'Umar', age:43},
      {id: 3, name: 'Asim', age:21},
      ]
export class TableFiltering{
dataSource = new MatTableDataSource(yourDataArray);

ngOnInit() {
this.dataSource.filterPredicate = (data: Element, filter:string) =>
      (data.name.indexOf(filter) !== -1 ||
        data.id.indexOf(filter) !== -1 );
  }
.
.
.
.
}

或者通过为筛选器指定一个值，将筛选器应用于所有列

ngOnInit() {
// Call applyFilter function with a filter value from code or template
   applyFilter(filterValue: string) {
    // filterValue = filterValue.trim(); // Remove whitespace
    // filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }
}

根据您的要求使用这两个选项中的任意一个（filterPredicate或dataSource.filter）。但请记住在ngOnInit（）中使用它们

使用MatTableDataSource非常有用，因为

可能会对您有所帮助