web-dev-qa-db-ja.com

MatTableの複数のフィルター

私は複数列のフィルタリングを適用しようとしています。つまり、列ヘッダーのテキスト入力は列のコンテンツでのみフィルタリングします。これまでのところ、filterPredicateのMatTableDataSourceが、一度列を横切るデフォルトのフィルタリングを無効にすると動作しなくなります。

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

私が探しているのは、列フィルターが適用されると、デフォルトのフィルターが既存のフィルター条件を更新し、さらにフィルター処理されたデータを返すことです。

StackBlitz

angulartypescriptangular-material
5
kal93

_searchString.name_のtoLowerCase()を呼び出すのを忘れたと思う

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

編集：1つのアプローチは、コンポーネントクラスにグローバルフィルターフィールドを作成することです。

_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

13
Randal Cunanan