如何在 angular material 数据 table 中过滤特定列

Question

我正在尝试 angular material 数据 table。

众所周知，默认情况下每行都会进行过滤。

如果我想过滤特定的列，那我应该怎么做？

我是否必须编写获取所有记录的方法，然后遍历它并比较特定列？

component.ts

ngOnInit() {
    this.service.getUser().subscribe( results => {
        if(!results){

          return;
        }
        console.log(results);
        this.dataSource = new MatTableDataSource(results);
        this.dataSource.sort = this.sort;
    })


onSearchClear(){
    this.searchKey="";
    this.applyFilter();
  }

  applyFilter(){
    this.dataSource.filter = this.searchKey.trim().toLowerCase();
  }

component.html

<mat-form-field class="search-form-field">
      <input matInput [(ngModel)]="searchKey" placeholder="search by userName" (keyup)="applyFilter()">
    </mat-form-field>

Answer 1

你应该使用 MatTableDataSource

的 filterPredicate 属性

初始化后this.dataSource，定义一个自定义的filterPredicate函数如下；

this.dataSource = new MatTableDataSource(results);
this.dataSource.sort = this.sort;
this.dataSource.filterPredicate = function(data: any, filterValue: string) {
  return data.specificColumn /** replace this with the column name you want to filter */
    .trim()
    .toLocaleLowerCase().indexOf(filterValue.trim().toLocaleLowerCase()) >= 0;
};

Answer 2

勾选this tutorial and working demo

如何在 angular material 数据 table 中过滤特定列

How to do filter in angular material data table for specific column

angular6

angular-material-6