angular - 具有多个条件的Angular 4数据过滤器
问题描述
我想根据多个下拉菜单(4 个下拉菜单)选择来过滤数据。
我可以选择任何一个下拉菜单或 2 个下拉菜单或多个下拉菜单。如何根据选择添加条件
this.gridData = this.dataProvider.filter(data => {
return data.column1 == this.selectedFitler1
&& data.column2== this.selectedFitler2
&& data.column3 == this.selectedFitler3
&& data.column4 == this.selectedFitler4 })
解决方案
let selectedFilter1 = ['val1a', 'val1b', 'va1e'];
...
let selectedFilter4 = ['val4a', 'val4c'];
this.gridData = this.dataProvider.filter(data => {
return (selectedFilter1.findIndex(filterVal => filterVal === data.column1) !== -1 || selectedFilter1.length === 0)
&& selectedFilter2.findIndex(filterVal => filterVal === data.column2) !== -1 || selectedFilter2.length === 0)
&& selectedFilter3.findIndex(filterVal => filterVal === data.column3) !== -1 || selectedFilter3.length === 0)
&& selectedFilter4.findIndex(filterVal => filterVal === data.column4) !== -1 || selectedFilter4.length === 0)
});
或者如果您知道列的类型并且不想重复自己:
isInSelected<T>(columnVal: T, filter: T[]): boolean {
return filter.length === 0
|| filter.findIndex(filterVal => filterVal === columnVal) !== -1
}
并像这样使用它:
this.gridData = this.dataProvider.filter(data => {
return this.isInSelected<string>(data.column1, this.selectedFilter1)
&& this.isInSelected<number>(data.column2, this.selectedFilter2)
&& this.isInSelected<number>(data.column3, this.selectedFilter3)
&& this.isInSelected<string>(data.column4, this.selectedFilter4);
});
推荐阅读
- spring-boot - Thymeleaf 模板未在条件内呈现参数值
- javascript - Sequelize include 在另一个 include 中
- php - 按日月年在laravel中制作报告
- java - 如何使用方法引用表示法(Class::method)在 Java 中将方法作为参数传递?
- bash - 使用 bash 在字符串之间查找文本并替换找到的字符串中的文本
- java - 对 java 的 Visual Studio Code 语言支持崩溃了 5 次
- ssas - DAX 计算行中的重复组
- sql-server - 在不使用循环或变量的情况下获取当月最后一天的数据
- python - 迭代两个具有特定条件的列表
- python-2.7 - 向边缘或节点添加颜色在networkx中不起作用?