MatTable上的多个过滤器 [英] Multiple Filters on MatTable

问题描述

我一直在尝试应用多列过滤，即在列标题中输入的文本将仅对列的内容进行过滤.到目前为止，我已经能够通过覆盖 filterPredicate > ，但一旦我覆盖了跨列的默认过滤功能，就不再起作用.

I've been trying to apply multi column filtering i.e a text input in column headers will filter only on the contents of the column.So far I've been able to make it work by overriding filterPredicate of MatTableDataSource but once I override the default filtering which is across columns no longer works.

export class TableFilteringExample implements OnInit
{
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);

  positionFilter = new FormControl();
  nameFilter = new FormControl();

  filteredValues =
  {
    position: '',
    name: '',
    weight: '',
    symbol: ''
  };

  ngOnInit()
  {
    this.positionFilter.valueChanges.subscribe((positionFilterValue) =>
    {
      this.filteredValues['position'] = positionFilterValue;
      this.dataSource.filter = JSON.stringify(this.filteredValues);
    });

    this.nameFilter.valueChanges.subscribe((nameFilterValue) =>
    {
      this.filteredValues['name'] = nameFilterValue;
      this.dataSource.filter = JSON.stringify(this.filteredValues);
    });

    this.dataSource.filterPredicate = this.customFilterPredicate();
  }

  applyFilter(filterValue: string)
  {
    this.dataSource.filter = filterValue.trim().toLowerCase();
    this.dataSource.filter = filterValue;
  }

  customFilterPredicate()
  {
    const myFilterPredicate = function(data: PeriodicElement, filter: string): boolean
    {
      let searchString = JSON.parse(filter);

      return data.position.toString().trim().indexOf(searchString.position) !== -1 && data.name.toString().trim().toLowerCase().indexOf(searchString.name)!== -1;
    }

    return myFilterPredicate;
  }
}

我要寻找的是一旦应用了列过滤器，默认过滤器应更新现有过滤条件并返回进一步的过滤数据.

What I'm looking for is once column filter is applied the default filter should update the existing filter criteria and return the further filtered data.

StackBlitz

StackBlitz

推荐答案

我认为您只是忘记了为 searchString.name

I think you just forgot to call toLowerCase() for searchString.name

data.name.toString().trim().toLowerCase().indexOf(searchString.name.toLowerCase())！== -1;

data.name.toString().trim().toLowerCase().indexOf(searchString.name.toLowerCase())!== -1;

一种方法是在Component类中创建一个全局过滤器字段.

One approach is to create a global filter field in your Component class.

globalFilter = '';

---

<mat-form-field>
  <input matInput [ngModel]="globalFilter" (ngModelChange)="applyFilter($event)" placeholder="Filter">
</mat-form-field>

---

applyFilter(filter) {
    this.globalFilter = filter;
    this.dataSource.filter = JSON.stringify(this.filteredValues);
}

---

然后尝试在其他字段之前先使用全局过滤器进行过滤.

---

Then try to filter using global filter first before the other fields.

  customFilterPredicate() {
    const myFilterPredicate = (data: PeriodicElement, filter: string): boolean => {
      var globalMatch = !this.globalFilter;

      if (this.globalFilter) {
        // search all text fields
        globalMatch = data.name.toString().trim().toLowerCase().indexOf(this.globalFilter.toLowerCase()) !== -1;
      }

      if (!globalMatch) {
        return;
      }

      let searchString = JSON.parse(filter);
      return data.position.toString().trim().indexOf(searchString.position) !== -1 &&
        data.name.toString().trim().toLowerCase().indexOf(searchString.name.toLowerCase()) !== -1;
    }
    return myFilterPredicate;
  }

这是正在运行的应用程序: https://stackblitz.com/edit/angular-hbakxo-5jeaic

Here's the working app: https://stackblitz.com/edit/angular-hbakxo-5jeaic

这篇关于MatTable上的多个过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！