Можно ли использовать filter и filterPredicate как в угловом материале? - PullRequest
0 голосов
/ 26 декабря 2018

Я могу использовать только функцию 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();
}
...