如何根据另一个数组中的元素从对象数组中过滤出一个对象？

Question

我正在开发一个带有multiple selection 的两个下拉菜单的项目，如果我在第一个下拉菜单中选择squirtle，则该选项将从第二个下拉菜单中禁用。但这不是预期的输出，而是：

1. 当有人从第一个下拉菜单中选择一个选项时，整个选项组应该从第二个下拉菜单中禁用/启用（仅第二个下拉菜单）。就像我从第一个下拉菜单中的Water组中选择Squirtle然后整个Water组应该在第二个下拉列表中被禁用/启用
2. 多重选择应该只适用于特定组。就像我在第一个下拉列表中从Water组中选择Squirtle一样，我应该只能从第一个下拉列表中的Water组中选择另一个选项（在第二个下拉列表中没有这样的限制，因为在第一个下拉菜单在第二个下拉菜单中被完全禁用（或删除）），如果我尝试从另一个组中选择，则两个下拉菜单都应该重置。

   这是 JSON：

    items = [
       {
         type: 'all',
         name: ['All Pokemon'],
       },
       {
         type: 'water',
         name: [
           'Squirtle',
           'Wartortle',
           'Blastoise',
           'Psyduck',
           'Golduck',
           'Tentacool',
           'Seel',
         ],
       },
       {
         type: 'fire',
         name: [
           'Charmander',
           'Charizard',
           'Vulpix',
           'Arcanine',
           'Ponyta',
           'Magmar',
           'Cyndaquil',
         ],
       },
       {
         type: 'earth',
         name: ['Growlithe', 'Arcanine', 'Geodude', 'Golem', 'Onix'],
       },
     ];
   

   我做了两个数组：

   this.arr1 = this.items;
   this.arr2 = this.items.filter((x) => x.type !== 'all');
   

   现在，当有人从第一个下拉列表(arr1) 中选择一个选项时，我试图根据在第一个下拉列表中选择的选项使用以下逻辑从(arr2) 中过滤掉整个对象：

   this.arr2.filter((x) => {
      console.log(x.name);
      const data = [];
      !includeTest.find((y) => {
           console.log('y ->', y);
           if (x.name.includes(y)) {
             data.push(y);
             console.log('data ->', data);
           }
         });
         x.name = data;
         console.log('x.name', x.name);
       });
   

   在这里，includeTest 包含基于它的字符串数组，我必须从另一个数组中过滤掉对象。 这是 problem 的 stackblitz 表示：

Answer 1

尝试阅读 Angular Pipes，尤其是“filter”。这里和 Angular 的文档中有很多资源。

简而言之，您的所有“ngFor”或“ng-repeat”都必须通过您的过滤器管道进行过滤。当您从下拉列表 1 中选择某些内容时，下拉列表 2 上的过滤器会显示根据下拉列表 1 值过滤的数据，反之亦然。

if (dropdown1.type == 'water') {dropdown2.items = ...}

或者

if (dropdown1.type == 'water' && dropdown1.name == 'Vulpix') {dropdown2.items = ...}

或者

<li *ngFor="let item of dropdown2 | callback: filterData">...</li>

filterData(item: Item) {
    if (dropdown1.type == 'water' && item == 'your rules') {return item}
}

所以下拉列表 2 的数据总是基于下拉列表 1