Question

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

下面是我的.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>

Answer 1

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

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

Working demo

Angular 5中Material Component DataTable中的多个过滤器

1 个答案: