Angular 基于多选下拉列表的过滤垫表

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

{{subVal}}

从http服务分配数据源

filterValues={
子值：“”，
水平：“，
ID:“
};
this.dataSource.data=[{
子值：“AA”，
横向：“In-1”，
ID:“1”
},
{
子值：“BB”，
水平：“In-2”，
ID:“2”
},
{
子值：“CC”，
水平：“In-2”，
ID:“2”
},
{
子值：“DD”，
横向：“In-1”，
ID:“1”
}];

ngOnInit（）{
if（this.dataSource）{
this.subValueFormControl.valueChanges.subscribe（SubValue=>{
this.filterValues.SubValue=子值；
this.dataSource.filter=JSON.stringify（this.filterValues）；
});
this.horizontalFormControl.valueChanges.subscribe（Horizontal=>{
this.filterValues.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，但筛选器仍然不是wokring。在这里，searchTerms的值与单个下拉选择的情况类似

searchTerms={
子值：[“AA”]，
水平方向：[“In-1”]，
ID:[“1”]
}

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

searchTerms={
子值：[“AA”，“BB”]，
水平方向：[“In-1”、“In-2”]，
ID:[“1”]
}

publictablefilter（）{
常量filterFunction=函数（数据，过滤器）：布尔值{
const searchTerms=JSON.parse（过滤器）；
返回(
data.SubValue.indexOf（searchTerms.SubValue）！=-1||
data.Horizontal.indexOf（searchTerms.Horizontal）！=-1||
data.ID.indexOf（searchTerms.ID）！=-1
);
};
返回过滤器功能；
}

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

---

Stackblitz:

在下面查找示例代码：

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

  }

ngOnInit（）{
//将从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（水平，'hor'）
});
this.idFormControl.valueChanges.subscribe（ID=>{
this.filterData（ID，'ID'）；
});
}
filterData（filterValue，类型）{
让子值FilterData=[]；
对于（var i=0；i{
如果（类型=='sub'）{
if（item.SubValue==filterValue[i]）{
子值FilterData.push（项目）；
返回；
}
}else如果（类型=='hor'）{
if（item.Horizontal==filterValue[i]）{
子值FilterData.push（项目）；
返回；
}
}else if（type==='id'）{
if（item.ID==filterValue[i]）{
子值FilterData.push（项目）；
返回；
}
}
});
}
if（子值FilterData.length==0）{
this.dataSource.data=this.tableDataSource；
}否则{
this.dataSource.data=subValueFilterData；
}
}

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

以

searchTerms.SubValue

为例，

searchTerms.SubValue

是一个数组和

数据。SubValue

是表中的值。在过滤器中，您正在执行

data.SubValue.indexOf（searchTerms.SubValue）！==-1

。这将检查

searchTerms.SubValue

是否存在于

数据中。SubValue

不正确。我们需要改变这一点，以实现相反的目的。因此，您的代码应该是

searchTerms.SubValue.indexOf（data.SubValue）！=-1

。您还必须相应地更新其他条件

这将使您的过滤器工作，但当没有选择任何条件时，过滤器将过滤掉整个表。为了避免这种情况，我们将进行一个检查，以在没有筛选器值的情况下返回整个表

下面是您的过滤器现在的外观

publictablefilter（）{
常量filterFunction=函数（数据，过滤器）：布尔值{
const searchTerms=JSON.parse（过滤器）；
//如果没有筛选值，则返回所有数据
if（！searchTerms.SubValue.length&&！searchTerms.Horizontal.length&&！searchTerms.ID.length）{
返回true；
}
返回(
searchTerms.SubValue.indexOf（data.SubValue）！=-1||
searchTerms.Horizontal.indexOf（data.Horizontal）！=-1||
searchTerms.ID.indexOf（data.ID）！=-1
);
};
返回过滤器功能；
}

---

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

subValue

，

horizontal

和

id

）。

如果您可以创建相同的工作堆栈Blitz，则会更容易提供帮助。请找到以下链接：