Как использовать как обычный фильтр, так и фильтр-предикат для matdatatable? - PullRequest
Новая
       40

Как использовать как обычный фильтр, так и фильтр-предикат для matdatatable?

0 голосов
/ 08 марта 2019

Я пытаюсь реализовать фильтр двумя способами для matdatatable, один для поиска по всем полям и другой фильтрации данных по отдельным данным столбца (это хорошо работает с пользовательской функцией фильтра filterPredicate).

Когда filterPredicate имеет значениеРеализован регулярный поиск по всем полям, который не работает, потому что ожидается функция пользовательского фильтра filterPredicate (data: any, filter: string), тогда как для обычного фильтра это только filter: string.Я хочу, чтобы оба работали. Как я могу добиться этого.

HTML 

<mat-form-field appearance="outline" id="request_table_filter">
   <mat-label>{{'Search'}}</mat-label>
   <input matInput (keyup)="applyFilter($event.target.value)" type="text" placeholder="{{'Filter' | translate}}" />
</mat-form-field>
<table mat-table matSort [dataSource]="dataSource">
    <ng-container matColumnDef="name">
       <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'Name'}}</th>
       <td mat-cell *matCellDef="let element">{{element.name}}</td>
    </ng-container>
    <ng-container matColumnDef="description">
       <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'Description'}}</th>
       <td mat-cell *matCellDef="let element">{{element.description}}</td>
    </ng-container>
    <ng-container matColumnDef="email">
       <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'Email'}}</th>
       <td mat-cell *matCellDef="let element">{{element.email}}</td>
    </ng-container>
    <ng-container matColumnDef="country">
       <th mat-header-cell *matHeaderCellDef mat-sort-header>{{'Country'}}</th>
       <td mat-cell *matCellDef="let element">{{element.country}}</td>
    </ng-container>
</table>

<div>
    <form[formGroup]="filterForm">
      <mat-form-field>
        <input matInput placeholder="Name" type="text" formControlName="name">
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="Description" type="text" formControlName="description">
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="Email" type="text" formControlName="email">
      </mat-form-field>
      <mat-form-field>
        <input matInput placeholder="Country" type="text" formControlName="country">
      </mat-form-field>
    </form>
  </div>

.ts 

filterForm: FormGroup;
NgOnit() {
    this.dataService.getData().subscribe(
        response => {
          this.listData = new MatTableDataSource(<any> response);
          this.listData.sort = this.sort;
          this.listData.paginator = this.paginator;
          this.listData.filterPredicate = this.tableFilter();
        }
       ,errorResponse => { console.log(errorResponse); }
    );
}
tableFilter(): (data: any, filter: string) => boolean {
  let filterFunction = function(data, filter): boolean {
  let searchTerms = JSON.parse(filter);
  return data.name.toString().indexOf(searchTerms.name) !== -1
      && data.description.indexOf(searchTerms.description) !== -1
      && data.email.toLowerCase().indexOf(searchTerms.email) !== -1
      && data.country.toString().indexOf(searchTerms.country) !== -1; 
 }
 return filterFunction;

} 

applyFilter(filterValue: string) {
   isSearch = true;
   this.listData.filter = filterValue.trim().toLowerCase();
}

Можно ли добавить любое условие в функцию tableFilter, напримерниже 

tableFilter(): (data: any, filter: string) => boolean {
  let filterFunction = function(data, filter): boolean {
      if(isSearch) {
          // code related to search filter
      } else {
        let searchTerms = JSON.parse(filter);
        return data.name.toString().indexOf(searchTerms.name) !== -1
               && data.description.indexOf(searchTerms.description) !== -1
               && data.email.toLowerCase().indexOf(searchTerms.email) !== -1
               && data.country.toString().indexOf(searchTerms.country) !== 
               -1; 
      }
      return filterFunction;
}
...