create array of object of arrays in angular - arrays

Question

I am trying to get the best possible solution but not getting any clue how to do it.
Task
there are 4 different multiple select drop down, and user can select any number of different values of each drop down and create a box ( limit to 7 ) through save button.
structure
> dropdown1
a1,a2,a3
> dropdown2
b1,b2,b3
> dropdown3
c1,c2,c3
> dropdown4
d1,d2,d3
Code for 1 dropdown
/* dropdown dp1 */
selecteddp1 = [];
dp1Loading = false;
dp1: any[] = [];
dp1Name = ["a1", "a2", "a3", "a4"];
selectAll() {
this.selecteddp1 = this.dp1.map(x => x.name);
}
unselectAll() {
this.selecteddp1 = [];
}
private loaddp1() {
this.dp1Loading = false;
this.dp1Name.forEach((c, i) => {
this.dp1.push({ id: i, name: c });
});
}
/* dropdown dp1 */
/* button event */
createQuery() {
this.selecteddp1.forEach(x => {
this.query.dp1.push(x);
});
}
/* button event */
on button event, saving selected dp1 value to query.
query:[] = [{
dp1: [],
dp2: [],
dp3: [],
dp4: []
}];
result (illustrated based on user selection)
<div class="box1">
<ul>
<li>dp1-a1</li>
<li>dp2-b1</li>
<li>dp2-b2</li>
<li>dp3-a1</li>
<li>dp3-c2</li>
</ul>
</div>
my approach will be wrong, kindly suggest better idea, how to save the selected value in array of objects and how to view it. TIA
Edit
I need to create box with selected value of dropdown(s). Once user click on save button.
In my view,query should be like this
query:[] = [{
dp1: [a1,a2],
dp2: [b1],
dp3: [c2],
dp4: [d3]
}],
[{
dp1: [a1,a2],
dp2: [b1],
dp3: [c2],
dp4: [d3]
}];

Answer 1

You can create your query array like this:
query = [{
dp1: ['a1','a2'],
dp2: ['b1'],
dp3: ['c2'],
dp4: ['d3']
}, {
dp1: ['a1','a2'],
dp2: ['b1'],
dp3: ['c2'],
dp4: ['d3']
}];
And your HTML whould be:
<div *ngFor="let dropdownGroup of query">
<select *ngFor="let dropdown of objectKeys(dropdownGroup)">
<option *ngFor="let option of dropdownGroup[dropdown]" [value]="option">{{option}}</option>
</select>
</div>
The objectKeys in the HTML is a property of the class that is equal to the object.keys:
objectKeys = Object.keys;
You can see this all together in this StackBlitz