Question

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

MatTableDataSource

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

StackBlitz

Answer 1

我认为您只是忘记为toLowerCase()拨通searchString.name

data.name.toString（）。trim（）。toLowerCase（）。indexOf（searchString.name.toLowerCase（））！== -1;

编辑：一种方法是在Component类中创建一个全局过滤器字段。

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

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

  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

Answer 2

在Angular Material Tables中，您可以使用mat表上的 filterPredicate 属性并为其提供 customFilter 方法，如下所示添加多列过滤器

来源Link

演示Link

        ngOnInit() {

        // Overrride default filter behaviour of Material Datatable
        this.dataSource.filterPredicate = this.createFilter();
        }

        ...
        ...

        // Custom filter method fot Angular Material Datatable
        createFilter() {
        let filterFunction = function (data: any, filter: string): boolean {
          let searchTerms = JSON.parse(filter);
          let isFilterSet = false;
          for (const col in searchTerms) {
            if (searchTerms[col].toString() !== '') {
              isFilterSet = true;
            } else {
              delete searchTerms[col];
            }
          }

          let nameSearch = () => {
            let found = false;
            if (isFilterSet) {
              for (const col in searchTerms) {
                searchTerms[col].trim().toLowerCase().split(' ').forEach(word => {
                  if (data[col].toString().toLowerCase().indexOf(word) != -1 && isFilterSet) {
                    found = true
                  }
                });
              }
              return found
            } else {
              return true;
            }
          }
          return nameSearch()
        }
        return filterFunction
        }

MatTable上的多个过滤器

2 个答案: