在角度 5 中过滤角度材料表中的特定列 [英] Filtering specific column in Angular Material table in angular 5

问题描述

Angular material 官网提到 filterPredicate: ((data: T, filter: string) => boolean) 会根据特定字段过滤数据.但不知道如何开始.

In Angular material official website it is mentioned that filterPredicate: ((data: T, filter: string) => boolean) will filter data based on specific field. But don't getting how to start.

我看过示例但没有得到:-https://stackblitz.com/edit/angular-material2-table?file=app%2Fapp.component.html

I have seen example but not getting:-https://stackblitz.com/edit/angular-material2-table?file=app%2Fapp.component.html

默认情况下，它基于整个对象进行过滤，但我只想基于 json 的单个属性进行搜索.

By default it filter based on whole object but i want to search only based on single property of json.

推荐答案

每列的工作过滤器，演示链接 堆叠闪电战.

Working filters on each column, demo link Stackblitz.

要过滤 mat-table 中的特定列，请为该列添加一个搜索字段，如下所示；

To filter specific column in mat-table, add a search field for the column as below;

<mat-form-field class="filter" floatLabel="never">
    <mat-label>Search</mat-label>
    <input matInput [formControl]="nameFilter">
  </mat-form-field>

我们将输入从 ReactiveFormsModule 连接到 FormControls.

And we connect the inputs to FormControls from the ReactiveFormsModule.

    filterValues = {
    name: '',
    id: '',
    colour: '',
    pet: ''
 };

我们将观察过滤器输入的值，并在它们更改时修改此过滤器对象和数据源的过滤器属性.我们必须将过滤器对象的字符串化版本分配给数据源的过滤器属性

And we will watch the value of the filter inputs and modify this filter object and the data source’s filter property when they change. We must assign the stringified version of the filter object to the data source’s filter property

    ngOnInit() {
    this.nameFilter.valueChanges
      .subscribe(
        name => {
          this.filterValues.name = name;
          this.dataSource.filter = JSON.stringify(this.filterValues);
        }
      )
    this.idFilter.valueChanges
      .subscribe(
        id => {
          this.filterValues.id = id;
          this.dataSource.filter = JSON.stringify(this.filterValues);
        }
      )
    this.colourFilter.valueChanges
      .subscribe(
        colour => {
          this.filterValues.colour = colour;
          this.dataSource.filter = JSON.stringify(this.filterValues);
        }
      )
    this.petFilter.valueChanges
      .subscribe(
        pet => {
          this.filterValues.pet = pet;
          this.dataSource.filter = JSON.stringify(this.filterValues);
        }
      )
  }

我们必须更改数据源的 filterPredicate 以告诉它如何解释过滤器信息.

We have to change the data source’s filterPredicate to tell it how to interpret the filter information.

    constructor() {
    this.dataSource.data = this.people;
    this.dataSource.filterPredicate = this.tableFilter();
    }

    tableFilter(): (data: any, filter: string) => boolean {
    let filterFunction = function(data, filter): boolean {
      let searchTerms = JSON.parse(filter);
      return data.name.toLowerCase().indexOf(searchTerms.name) !== -1
        && data.id.toString().toLowerCase().indexOf(searchTerms.id) !== -1
        && data.colour.toLowerCase().indexOf(searchTerms.colour) !== -1
        && data.pet.toLowerCase().indexOf(searchTerms.pet) !== -1;
    }
    return filterFunction;
}
 

这篇关于在角度 5 中过滤角度材料表中的特定列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！