基于多选下拉列表过滤对象列表 Javascript/Typescript/Lodash/Angular

Question

我遇到了一个复杂的问题，需要您的帮助。

我有多个下拉过滤器，例如位置、类别、子类别等。我的初始版本在选择任何组合的地方工作，它将返回正确的结果。我的下一个挑战是使用多选制作下拉菜单。我为此使用了firebase，试图在客户端进行复杂的过滤。

我有从数据库获得的类似对象的列表：

{
 data1: {
     status: true,
     location: "New York",
     category: "Food",
     subcategory: "Pizza",
     price: 24
 }
 data2: {
     status: true,
     location: "Chicago",
     category: "Food",
     subcategory: "Hot Dogs",
     price: 5
 }
 data3: {
     status: true,
     location: "Miami",
     category: "Food",
     subcategory: "Taco",
     price: 2
 }
}

为了按多个值过滤，我有以下内容：

filter() {
  this.filteredData = _.filter(this.getListings, _.conforms(this.activeFilters)).filter(x => 
  x.status === true);
}

然后，我有一个方法可以根据条件设置活动过滤器，或者通过删除该活动过滤器来显示该属性中的所有内容，例如：

filterLocation() {
const location = this.filtersData.get('location').value;
this.locations = [];

for(let i = 0; i < location.length; i++) {
  if (location[i].itemName === 'All') {
    this.removeFilter('location');
  }

  if (location[i].itemName !== 'All') {
   this.locations.push(location[i].itemName);

   property = 'location';
   this.activeFilters[property] = val => this.locations.some(x => 
   val.includes(x));
   this.filter();
  }
}
}

然后，我对类别，子类别等有相同或相似的方法。

我现在想要实现的事情是，例如，如果需要，我想多选位置和类别或子类别，但不限于将来添加更多属性。

因此，如果我选择纽约和迈阿密，我想获取所有包含这些值的项目，但如果我想按食物、饮料等其他值进行过滤，则不受限制

此示例非常适合按单个值进行过滤，您可以根据需要添加任意数量的过滤器和组合，它将始终返回与您从下拉列表中选择的对象匹配的对象数组。

我正在尝试一些东西，如果我设法解决它，我会更新问题，同时我感谢所有帮助。谢谢。

Answer 1

我想通了！我根据我的解决方案更新了 filterLocation() 方法。我现在要努力改进过滤器。