如何在特定列的角材料数据表中进行过滤

moh*_*han 2 angular6 angular-material-6

我正在尝试角材料数据表。

正如我们所知,默认情况下每行都会发生过滤。

如果我想过滤特定列,那我该怎么办?

我是否应该编写获取所有记录的方法,然后对其进行迭代并比较特定列?

组件.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();
  }
Run Code Online (Sandbox Code Playgroud)

组件.html


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

ysf*_*ysf 7

你应该使用的filterPredicate财产MatTableDataSource

初始化 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;
};
Run Code Online (Sandbox Code Playgroud)


Cod*_*Spy 6

检查教程和工作演示

在此处输入图片说明