Несколько фильтров в компоненте данных DataTable в Angular 5 - PullRequest
Новая
       5

Несколько фильтров в компоненте данных DataTable в Angular 5

0 голосов
/ 17 мая 2018

Мне нужна помощь в отношении нескольких фильтров.Я использовал материальные фильтры данных, но он фильтровал всю сетку, но мне нужно настроить фильтры.В одиночной сетке мне нужен фильтр, который будет искать по разным столбцам.

Ниже приведен мой код файла .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>

1 Ответ

0 голосов
/ 17 мая 2018

Вы можете переопределить поведение фильтра по умолчанию, указав свой filterPredicate.То есть, для фильтрации только по столбцу name: 

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

Рабочая демонстрация

...