Angular Material - 自定义列筛选器和默认筛选器无法协同工作

Question

列过滤器工作得很好，但默认过滤器（输入字段搜索）根本不起作用。我尝试了几件事，但没有成功。我希望我的输入字段具有搜索两个列的默认行为，即 allAssociates 和 dept 列以及各个列过滤器。它也不会抛出任何错误。自定义列过滤器参考来自，所以我没有包括在这里： https://www.freakyjolly.com/angular-material-table-custom-filter-using-select-box/#Adding_Filters_on_Table

filterTable 方法未按预期工作我将不胜感激任何建议..

完整代码：https://stackblitz.com/edit/angular-material-b6qdyt?file=app%2Fapp.component.html

分享了以下片段：

HTML

<div>
  <mat-form-field 
    *ngFor="let filter of filterSelectObj" 
    style="margin-left: 15px;">
    <mat-label> Filter {{filter.name}} </mat-label>
    <select 
      matNativeControl 
      name="{{filter.columnProp}}" 
      [(ngModel)]="filter.modelValue" 
      (change)="filterChange(filter,$event)">
      <option value=""> All </option>
      <option 
        [value]="item" 
        *ngFor="let item of filter.options">
        {{item}}
      </option>
    </select>
  </mat-form-field>
  <mat-icon>search</mat-icon>
  <input 
    type="text" 
    placeholder="All Associates/Dept" 
    #input 
    (keyUp)="filterTable($event.target.value)"> &nbsp;
  <button 
    mat-stroked-button
    color="warn" 
    (click)="resetFilters(input)">
    Reset
  </button>
</div>

TS文件:

ngOnInit() {
  //fetch data from Service
  const deptData = this.deptService.getData();
  this.dataSource = new MatTableDataSource(deptData);
  this.dataSource.filterPredicate = this.createFilter();
  this.filterSelectObj.filter((o) => {
    o.options = this.getFilterObject(deptData, o.columnProp);
  });
}

filterTable(input: string) {
  this.dataSource.filterPredicate =
    (data: DepartmentData, f: string) => !f || (data.allAssociates || data.dept) == f;
  input = input.trim(); // Remove whitespace
  input = input.toLowerCase(); // MatTableDataSource defaults to lowercase matches
  this.dataSource.filter = input;
}

Answer 1

好的。我在您的实施中发现了两个问题。

在您绑定到 (keyUp) 的模板中，当要绑定到的实际事件名称是 (keyup).
您的谓词函数有问题。应该是这样的：

this.dataSource.filterPredicate = (data: DepartmentData, f: string) => !f || data.allAssociates.toLowerCase().包括(f) || data.dept.toLowerCase().包括(f.toLowerCase());

解决这两个问题应该会开始为您工作。

Here's a Working Sample StackBlitz for your ref.

Angular Material - 自定义列筛选器和默认筛选器无法协同工作

Angular Material - Custom Column filter and Default filter not working together

angular

angular-material

angular-filters

angular-material-table