如何在特定列的角材料数据表中进行过滤 [英] How to do filter in angular material data table for specific column

查看:48
本文介绍了如何在特定列的角材料数据表中进行过滤的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试角度材料数据表.

i am trying angular material data table.

我们知道默认情况下每行都会发生过滤.

As we know filtering happened for each row by default.

如果我要过滤特定于列的内容,那该怎么办?

If i want to filter column specific, then what should i do?

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

Should i have to write method for getting all records, then iterate over it and compare specific column?

component.ts

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

component.html

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

推荐答案

,您应该使用初始化this.dataSource之后,按如下所示定义自定义filterPredicate函数;

after you initialize this.dataSource, define a custom filterPredicate function as follows;

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;
};

这篇关于如何在特定列的角材料数据表中进行过滤的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆