如何在角垫表中添加多个过滤器? [英] how to add multiple filters in angular mat table?

问题描述

HTML这是我在表格上添加过滤器的 component.html 文件的代码:

HTML this is the code of my component.html file in which i am adding filters on a table:

<mat-form-field>
        <input matInput  class="form-field" [formControl]="employeeFilter" >
        <mat-placeholder>Employee Name </mat-placeholder>
      </mat-form-field>
    <mat-form-field>
        <input matInput   class="form-field" [formControl]="projectFilter" >
        <mat-placeholder>Project Name</mat-placeholder>
      </mat-form-field>

TS 文件:这是我的 ts 文件，我在其中编写了使用此链接代码过滤列的代码.ngOnInit(): void {

TS File: this is my ts file in which i have written code for filtering columns using this link code. ngOnInit(): void {

this.userdataService.getReports().subscribe(data=>{
  this.userData=data;
  this.dataSource = new MatTableDataSource(this.userData.response);

  this.employeeFilter.valueChanges.subscribe((employeeFilterValue)=> {
    this.filteredValues['employee'] = employeeFilterValue;
    this.dataSource.filter = JSON.stringify(this.filteredValues);
    });

    this.projectFilter.valueChanges.subscribe((projectFilterValue) => {
      this.filteredValues['project'] = projectFilterValue;
      this.dataSource.filter = JSON.stringify(this.filteredValues);
    });

    this.dataSource.filterPredicate = this.customFilterPredicate();

  this.dataSource.paginator = this.paginator;
});

}

这是过滤功能.

  customFilterPredicate() {
    const myFilterPredicate = function(data:userData, filter:string) :boolean {
      let searchString = JSON.parse(filter);
      let employeeFound = data.employee.toString().trim().toLowerCase().indexOf(searchString.employee.toLowerCase()) !== -1
      let projectFound = data.project.toString().trim().indexOf(searchString.project) !== -1
      if (searchString.topFilter) {
          return employeeFound || projectFound
      } else {
          return employeeFound && projectFound
      }
    }
    return myFilterPredicate;
  }

在以下行中传递参数时过滤器函数出错

i am getting error in filter function while passing arguments in the following line

const myFilterPredicate = function(data:userData, filter:string) :boolean

const myFilterPredicate = function(data:userData, filter:string) :boolean

推荐答案

我认为您的自定义过滤器存在一些错误.当 searchString.employee 和 searchString.project 为空一个或两个时，你需要考虑

I think that your custom filter has some errors. You need take account when searchString.employee and searchString.project are null one or both

请注意，在您的代码中，如果employeeFilter 为空或为空employeeFound 为真，如果projectFilter 为空或空projectFound 也为真

See that, in your code, if the employeeFilter is null or empty employeeFound is true and if projectFilter is null or empty projectFound is also true

这是响应，但作为补充，我做了一个 stackblitz 基于材料 Angular 与周期元素的典型示例.

Here is the response, but To complementary I make a stackblitz based in the tipical example of material Angular with the periodic elements.

为了改进和简化，我把所有的 FormControls 放在一个 FormGroup 中

To improve and simplify, I put all the FormControls in a FormGroup

form = new FormGroup({
    name: new FormControl(''),
    position: new FormControl(),
    and: new FormControl(false)
  });

只需订阅 valueChanges

To simply subscribe to valueChanges

this.form.valueChanges.subscribe(res => {
  this.dataSource.filter = JSON.stringify(res);
});

我的自定义过滤器就像

  customFilter = (data: PeriodicElement, filter: string) => {
    const filterData = JSON.parse(filter);

    //see that if filterData.name=null nameOk=true
    const nameOk =
      data.name.toLowerCase().indexOf(filterData.name.toLowerCase()) >= 0;

    //see that if filterData.position=null positionOk=true
    const positionOk = !filterData.position || data.position == filterData.position;

    if (filterData.and) { //there're no problemo
      return nameOk && positionOk;
    } else { //take account when filterData.name or filterData.position is null
      if (filterData.name && filterData.position) return nameOk || positionOk;
      else {
        if (filterData.name) return nameOk;
        if (filterData.position) return positionOk;

        return true;
      }
    }
  };

希望给你灵感

这篇关于如何在角垫表中添加多个过滤器?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！