angular - 如何重置垫表过滤器谓词？

Question

我正在使用 Mat Table，其中有 2 个过滤条件/选项。

• 用于基于 1 列进行过滤的切换按钮。

• 还有一个普通的输入文本框，用于根据默认行为、字符串匹配进行过滤。

因此，当我调用切换函数时，我正在使用过滤器谓词方法覆盖默认过滤器。如何将过滤器重置回默认状态？

附言我正在从后端 API 调用获取表格数据。

Answer 1

更新方法就是创建一个 CustomFunction。

在你有一个变量“check”和一个customFilter

  check=false;
  customFilter = (data: PeriodicElement, filter: string) => {
    if (this.check)
        return data['name`].toLowerCase().indexOf(filter)>=0

    const search=(data['name']+"|"+data['description']...).toLowerCase()
        return search.indexOf(filter)>=0
  };

你可以有一个输入和一个复选框

<mat-form-field>
  <mat-label>Search</mat-label>
  <input #input matInput (input)="dataSource.filter=input.value.toLowerCase()" />
</mat-form-field>
<mat-checkbox [(ngModel)]="check" 
    (change)="dataSource.filter=input.value.toLowerCase()">
</mat-checkbox>

Update2如果可以的话，我们可以用一个FormControl来改变dataSource.filter的方式

  control=new formControl()

  //After defined the dataSource
  this.control.valueChanges.pipe(
      throttleTime(200))
      .subscribe((res:string)=>{
        this.dataSource.filter=res.toLowerCase()
    })

并使用

  <input matInput [formControl]="control" />
  <mat-checkbox [(ngModel)]="check" 
      (change)="dataSource.filter=control.value.toLowerCase()">
  </mat-checkbox>

一个自定义函数挡住了路

customFilter = (data: any, filter: string) => {
  
}

过滤器是this.dataSource.filter的值, 所以我们可以做一些类似的 SO .在 SO 中使用了 ReactiveForms，但您也可以通过他的方法简单地使用 mat-input 和 mat-checkbox。所以

<mat-form-field>
  <mat-label>Search</mat-label>
  <input #input matInput (input)="changeFilter({value:input.value.toLowerCase()})" />
</mat-form-field>
<mat-checkbox (change)="changeFilter({checked:$event.checked})"></mat-checkbox>

(*)注意我将值传递给小写

你可以使用

  changeFilter(obj:any){
    this.dataSource.filter=JSON.stringify(
          {...JSON.parse(this.dataSource.filter),...obj})
    }


  customFilter = (data: PeriodicElement, filter: string) => {
    const {value,checked}=JSON.parse(filter)
    //here you has in value the value of the input and 
    //             in checked if the checkbox is checked or not 
    ..create the condition and return true or false
    return true;
  };

最后是创建数据源的时候

this.dataSource = new MatTableDataSource(ELEMENT_DATA);
this.dataSource.filterPredicate = this.customFilter;
this.dataSource.filter=JSON.stringify({value:'','checked':false})