基于多选下拉过滤 Mat-Table

Question

我需要根据下拉选择过滤垫表数据。因此，我添加了一个自定义过滤器，但过滤无法正常工作，因为我在 mat-select 下拉列表中使用多个选项我在数组中获取值，但不确定如何过滤这些值。谁能帮帮我。

<mat-form-field class="view-filter">
    <mat-select placeholder="Sub Value" [FormControl]="subValueFormControl" multiple>
        <mat-option *ngFor="let subVal of subValueOptions" [value]="subVal">
            {{subVal}}
        </mat-option>
    </mat-select>
</mat-form-field>

从 http 服务分配数据源。

filterValues = {
    SubValue: "",
    Horizontal: "",
    ID: ""
};

this.dataSource.data = [{
    SubValue: "AA",
    Horizontal: "In-1",
    ID: "1"
},
{
    SubValue: "BB",
    Horizontal: "In-2",
    ID: "2"
},
{
    SubValue: "CC",
    Horizontal: "In-2",
    ID: "2"
},
{
    SubValue: "DD",
    Horizontal: "In-1",
    ID: "1"
}];

ngOnInit(){
    if (this.dataSource) {
        this.subValueFormControl.valueChanges.subscribe(SubValue => {
            this.filterValues.SubValue = SubValue;
            this.dataSource.filter = JSON.stringify(this.filterValues);
        });

        this.horizontalFormControl.valueChanges.subscribe(Horizontal => {
            this.filterValues.Horizontal = Horizontal;
            this.dataSource.filter = JSON.stringify(this.filterValues);
        });
        this.idFormControl.valueChanges.subscribe(ID => {
            this.filterValues.ID = ID;
            this.dataSource.filter = JSON.stringify(this.filterValues);
        });

        this.dataSource.filterPredicate = this.tableFilter();
    }
}

尝试将值也更改为 toLowerCase 但仍然 filter 不是 wokring 。这里 searchTerms 的值是这样的，以防单下拉选择

searchTerms = {
    SubValue: ["AA"],
    Horizontal: ["In-1"],
    ID:["1"]
}

当在下拉列表中进行多项选择时

searchTerms = {
    SubValue: ["AA","BB"],
    Horizontal: ["In-1","In-2"],
    ID:["1"]
}

public tableFilter() {
    const filterFunction = function (data, filter): boolean {
        const searchTerms = JSON.parse(filter);
        return (
            data.SubValue.indexOf(searchTerms.SubValue) !== -1 ||
            data.Horizontal.indexOf(searchTerms.Horizontal) !== -1 ||
            data.ID.indexOf(searchTerms.ID) !== -1
        );
    };
    return filterFunction;
}

如何根据这些多个下拉选择过滤数据？请帮帮我。

堆栈闪电战：https://stackblitz.com/edit/angular-xhacoa?file=src%2Fapp%2Fapp.component.ts

Answer 1

在您的过滤器中，您检查的数据不正确。

我们以searchTerms.SubValue 为例，searchTerms.SubValue 是一个数组，data.SubValue 是表中的值。在您的过滤器中，您正在执行data.SubValue.indexOf(searchTerms.SubValue) !== -1。这将检查searchTerms.SubValue 是否存在于data.SubValue 中，这是不正确的。我们需要以相反的方式工作。所以你的代码应该是searchTerms.SubValue.indexOf(data.SubValue) !== -1。您还必须相应地更新其他条件。

这将使您的过滤器起作用，但是当没有选择任何条件时，过滤器将过滤掉整个表格。为避免这种情况，我们将检查以返回整个表，以防没有过滤器值。

这是您的过滤器现在的外观。

public tableFilter() {
    const filterFunction = function (data, filter): boolean {
        const searchTerms = JSON.parse(filter);

        // return all data if there are no filter values
        if (!searchTerms.SubValue.length && !searchTerms.Horizontal.length && !searchTerms.ID.length) {
            return true;
        }

        return (
            searchTerms.SubValue.indexOf(data.SubValue) !== -1 ||
            searchTerms.Horizontal.indexOf(data.Horizontal) !== -1 ||
            searchTerms.ID.indexOf(data.ID) !== -1
        );
    };
    return filterFunction;
}

附带说明，避免使用以大写字母开头的变量名。请改用驼峰命名法（subValue、horizontal 和 id）。

Answer 2

TypeScript 版本：

private createFilters<T>(): (data: T, filter: string) => boolean {
  const filterFunction = function (data: T, filter: string): boolean {
    const searchTerms: Partial<Record<keyof T, string>> = JSON.parse(filter);

    if (searchTerms === null || searchTerms === undefined) {
      return true;
    }

    return Object.keys(searchTerms).every((key) => {
      if (Array.isArray(searchTerms[key])) {
        return searchTerms[key]?.length > 0
          ? searchTerms[key].some((term: string) =>
              Array.isArray(data[key])
                ? data[key].includes(term)
                : data[key] === term
            )
          : true;
      }

      return (
        data[key]?.toLowerCase()?.indexOf(searchTerms[key]?.toLowerCase()) !==
        -1
      );
    });
  };

  return filterFunction;
}

Answer 3

在下面找到示例代码：

ngOnInit() {
    //will be assigned data from httpcall 
    var filData = [];
    filData = this.tableDataSource;

      this.dataSource.data = this.tableDataSource;

      this.subValueFormControl.valueChanges.subscribe(SubValue => {
          this.filterData(SubValue,'sub');
    });

    this.horizontalFormControl.valueChanges.subscribe(Horizontal => {
        this.filterData(Horizontal,'hor')
    });
    this.idFormControl.valueChanges.subscribe(ID => {
        this.filterData(ID,'id');
    });

  }

   filterData(filterValue,type){
       let subValueFilterData= [];
      for(var i=0;i<filterValue.length;i++) {
      this.tableDataSource.filter(item => {
        if(type === 'sub') {
            if(item.SubValue === filterValue[i]) {
              subValueFilterData.push(item);
              return;
            }
        } else if (type === 'hor') {
            if(item.Horizontal === filterValue[i]) {
              subValueFilterData.push(item);
              return;
            }
        } else if(type === 'id') {
             if(item.ID === filterValue[i]) {
              subValueFilterData.push(item);
              return;
            }
        }
      });
      }
      if(subValueFilterData.length==0) {
        this.dataSource.data = this.tableDataSource;
      } else {
        this.dataSource.data = subValueFilterData;
      }

  }