如何重置垫表过滤谓词？答案

【问题标题】：How to reset mat table filter predicate?如何重置垫表过滤谓词？
【发布时间】：2021-12-24 19:25:06
【问题描述】：

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

用于基于 1 列进行过滤的切换按钮。
还有一个普通的输入文本框，用于根据默认行为进行过滤，字符串匹配。

所以当我调用切换函数时，我使用过滤谓词方法覆盖了默认过滤器。如何将过滤器重置为默认状态？

附：我正在从后端 api 调用中获取表数据。

【问题讨论】：

您有任何代码示例吗？也许使用组件内的函数处理切换更改并将过滤器的状态保存到一个对象中，以便您可以管理按钮切换的状态？
是的，这听起来可能。因此，我可以有一个过滤器对象来处理多个列，而不是使用单独/不同的过滤器。并根据过滤器的状态，从对象中应用相应的过滤器值。
是的，我认为这些方法会更干净。如果你的应用中有很多类似的东西，也许你应该考虑使用像 ngrx 或 akita 这样的状态管理器库。
这能回答你的问题吗？ Reset this.dataSource.filterPredicate in Angular

标签： angular angular-material mat-table

【解决方案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})

【讨论】：