Question

我正在尝试在matdatatable上实现过滤器2种方法，一种用于通过单个列数据搜索所有字段，而另一种过滤数据（这与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;
}

如何在matdatatable上同时使用常规过滤器和filterpredicate？

0 个答案: