是否可以在角度材料中同时使用 filter 和 filterPredicate ？答案

【问题标题】：Is it possible to use filter and filterPredicate both in angular material?是否可以在角度材料中同时使用 filter 和 filterPredicate ？
【发布时间】：2019-05-24 13:08:02
【问题描述】：

我只能使用filter或filterPredicate的功能。

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

过滤功能会产生错误：

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

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

下面是组件和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();
}

【问题讨论】：

这表明您的“JSON”并非全部结构化，并且在 JSON 解析期间具有非转义的特殊字符。查看您从服务器返回的数据。
@AliBenMessaoud 首先感谢您的评论... filter 的数据结构是 String 和 filterPredicate 是 ((data: T, filter: string) => boolean) 那么我该如何一起应用呢？

标签： angular filter angular-material

【解决方案1】：

过滤器覆盖过滤器

过滤器：字符串

过滤器术语，用于从数据数组中过滤掉对象。要覆盖数据对象与此过滤器字符串的匹配方式，请为 filterPredicate 提供自定义函数。

filterPredicate: (data: T, filter: string) => boolean

检查数据对象是否匹配数据源的过滤字符串。默认情况下，每个数据对象都转换为其属性的字符串，如果过滤器在该字符串中至少出现一次，则返回 true。默认情况下，过滤器字符串的空格被修剪并且匹配不区分大小写。可能会被过滤器匹配的自定义实现覆盖。

【讨论】：