以角度5过滤Angular Material表中的特定列

Question

在Angular资料官方网站上提到filterPredicate:((data:T,filter:string)=> boolean)将根据特定字段过滤数据.但是没有得到如何开始.

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

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

Answer 1

我设法做到这样:

this.dataSource.filterPredicate = (data, filter) =>
      (data.name.indexOf(filter) !== -1 ||
        data.id.indexOf(filter) !== -1 );
  }

Answer 2

每列上的工作过滤器，演示链接Stackblitz。

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

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

然后，将输入从ReactiveFormsModule连接到FormControls。

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

};

然后，我们将观察过滤器输入的值，并在更改过滤器对象和数据源的过滤器属性时对其进行修改。我们必须将过滤器对象的字符串化版本分配给数据源的filter属性

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来告诉它如何解释过滤器信息。

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;

}

Answer 3

只需在组件中声明一个带有以下声明的函数,然后将其分配给DataSource.filterPredicate.要使用过滤器,只需为DataSource.filter属性指定一个字符串.

  customFilter(Data: T, Filter: string): boolean {
    return <true if Data matches filter>
  }

Answer 4

您可以按动态列进行过滤，就像在no 硬编码列名称中一样，执行以下操作：

// On input focus: setup filterPredicate to only filter by input column
setupFilter(column: string) {
  this.dataSource.filterPredicate = (d: TableDataSourceType, filter: string) => {
    const textToSearch = d[column] && d[column].toLowerCase() || '';
    return textToSearch.indexOf(filter) !== -1;
  };
}

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

在模板中你可以有这样的东西：

<ng-container matColumnDef="item-filter">
  <th mat-header-cell *matHeaderCellDef>
    <input (keyup)="applyFilter($event.target.value)" (focus)="setupFilter('name')" />
  </th>
</ng-container>

或者一个更复杂的示例，动态创建带有每列过滤的标题行：

<table mat-table [dataSource]="dataSource">
   <ng-container *ngFor="let filterCol of ['names', 'age', 'address']">
     <ng-container matColumnDef="filterCol">
       <th mat-header-cell *matHeaderCellDef>
         <input (keyup)="applyFilter($event.target.value)" (focus)="setupFilter(filterCol)"/>
       </th>
     </ng-container>
   </ng-container>

   <tr mat-header-row *matHeaderRowDef="['names', 'age', 'address']"></tr>
</table>

请注意，多个标题行不能具有相同的键，因此这不起作用：

<tr mat-header-row *matHeaderRowDef="['names', 'age', 'address']"></tr>
<tr mat-header-row *matHeaderRowDef="['names', 'age', 'address']"></tr>