I was working on a project with two drop-downs with multiple selection, where if I selected squirtle in the 1st dropdown that option get disabled from the 2nd dropdown. But that was not what the intended output was, instead:

1. When someone selects an option from the 1st dropdown, the whole group of option should get disabled/enable from the 2nd dropdown(only 2nd dropdown).Like if I select Squirtle from group Water in 1st dropdown then the whole Water group should get disabled/enabled in the 2nd dropdown
2. The multiple selection should work only for a certain group. Like if I select Squirtle from group Water in 1st dropdown, I should only be able to select another option from Water group in the 1st dropdown (there is no such limitation in the 2nd dropdown, as the group selected in the 1st dropdown get disabled(or removed) completely in the 2nd dropdown) and if I try to select from another group, the both the drop-downs should reset.

Here is the 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'],
    },
  ];

I have made two arrays:

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

Now when one selects an option from the 1st dropdown (arr1),I am trying to filter out the whole object from (arr2) based on the option selected in the 1st dropdown using this logic:

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

Here, includeTest contains array of string based on which,I have to filter out the objects from the other array. This is the stackblitz representation of the problem:

CodePudding user response：

Try to read about Angular Pipes, especially about "filter". There is lot's of resource in here and also in documentation of Angular.

Shortly described, all your 'ngFor' or 'ng-repeat' must be filtered through your filter pipe. When you select something from dropdown 1, the filter on dropdown 2, fill show data filtered based on dropdown 1 value or vice-versa.

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

or

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

or

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

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

so the data of dropdown 2 always will be based on dropdown 1

CodePudding user response：

I was able to achieve my 1st issue. I used .forEach() instead of .map() and checked if selected option is in the object using .includes(). A stackblitz representation of it.

But still unable to solve the second issue