是否可以在角形材质中同时使用filter和filterPredicate？

Question

我只能使用filter或filterPredicate函数。

当我尝试在一个组件中同时使用两个函数（filter + filterPredicate）时。

过滤器功能将产生错误：

"core.js:14597 ERROR SyntaxError: Unexpected token  in JSON at position 0"

仅当我使用filter或filterPredicate时，它才能正常工作。

下面是Component和Component.ts：

HTML：

      <mat-form-field class="search-form-field" floatLabel="never">
        <input matInput [(ngModel)]="searchKey" placeholder="Search" autocomplete="off" (keyup)="applyFilter()">
      </mat-form-field>

          <ng-container matColumnDef="dataYear">
              <mat-header-cell *matHeaderCellDef>
                  <mat-form-field class="searchIncolumn">
                    <mat-icon matPrefix>search</mat-icon>
                    <input matInput placeholder="Year" [formControl]="yearFilter" />
                </mat-form-field>
              </mat-header-cell>
              <mat-cell *matCellDef="let element"> {{element.dataYear}} </mat-cell>
            </ng-container>

TS：

yearFilter = new FormControl();
displayedColumns: string[] = ['dataYear'];

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.dataYear.toString().indexOf(searchTerms.dataYear) !== -1
          && data.dataMonth.indexOf(searchTerms.dataMonth) !== -1
          && data.sources.toLowerCase().indexOf(searchTerms.sources) !== -1
          && data.population.toString().indexOf(searchTerms.population) !== -1; 
  }
  return filterFunction;

} 


applyFilter() {
  this.listData.filter = this.searchKey.trim().toLowerCase();
}