Angular 5中材料组件数据表中的多个过滤器答案

【问题标题】：Multiple Filters in Material Component DataTable in Angular 5Angular 5中材料组件数据表中的多个过滤器
【发布时间】：2018-05-17 08:19:44
【问题描述】：

我需要有关多过滤器的帮助。我使用了材料数据表过滤器但它过滤了整个网格，但我需要自定义过滤器。在单网格我需要一个过滤器，它将通过不同的列进行搜索。

下面是我的 .ts 文件代码，它在过滤整个网格时可以正常工作。

 import { HttpClient } from '@angular/common/http';
    import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';

    import { MatTableDataSource, MatSort, MatPaginator } from '@angular/material'
    import { importType } from '@angular/compiler/src/output/output_ast';

    @Component({
      selector: 'app-grid',
      templateUrl: './grid.component.html',
      styleUrls: ['./grid.component.scss']
    })
    export class GridComponent implements OnInit, AfterViewInit {

      grantsearch = [];

      @ViewChild(MatSort) sort: MatSort;
      @ViewChild(MatPaginator) paginator: MatPaginator;

      dataSource = new MatTableDataSource(ELEMENT_DATA);
      displayedColumns = ['number', 'title', 'agency', 'status', 'posted', 'closed'];

      constructor(private http: HttpClient) { }

ngAfterViewInit() {
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
  }

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }

.html 文件用于

 <div class="example-container mat-elevation-z8">
        <div class="example-header">
            <mat-form-field>
                <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
            </mat-form-field>
        </div>

           </div>

【问题讨论】：

您的问题不清楚。你的问题到底是什么？当前和期望的行为是什么？
@bugs 我正在使用 Angular 5 中的 wordpress api 只是为了在网格中显示数据，我使用了过滤器（搜索），我使用的网格表和过滤器是材料组件。何时使用过滤器在整个网格中进行搜索，但我想在特定列中指定过滤器并希望在单个网格中使用不同的材料过滤器。

标签： javascript angular angular-material angular-material2

【解决方案1】：

您可以通过指定自己的filterPredicate 来覆盖过滤器的默认行为。即，仅过滤 name 列：

this.dataSource.filterPredicate = function(data, filter: string): boolean {
    return data.name.toLowerCase().includes(filter);
}

Working demo

【讨论】：

还有一件事请你帮我在Angular 5中使用材料自定义过滤器。