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，但仍然无法正常运行。在这种情况下，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;
}

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

Stackblitz：https://stackblitz.com/edit/angular-xhacoa?file=src%2Fapp%2Fapp.component.ts

Answer 1

在下面找到示例代码：

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;
      }

  }

Answer 2

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

让我们以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;
}

另一方面，请避免使用以大写字母开头的变量名称。改用camelCase（subValue，horizontal和id）。

根据“多项选择”下拉列表过滤Mat-Table

2 个答案: