How can we create multiple dynamic drop down using *ngFor loop angular 5

Question

I have a list of dropdown and i am creating DOM structure using Angule5 like

<div *ngFor="let dropdownof ListOfDropdown" class="md-form form-lg">
<select name="function">
     <option *ngFor="let option of optionList" value={{option .id}} required>{{option .value}}</option>
</select>
</div>

in .ts file i have 3 backend services for list of option. and one services for no of dropdown

 public getCountry(){//some logic} 
 public gettype(){//some logic}
 public getlang(){//some logic}

 public getDropdownList(){//some logic}

now the problem is its creating 3 dropdown but option is repeating, only getlang is showing in all list!!! please help

Answer 1

for each dropdown it should have a collection of data. you could have something like:

        private countries: any[];
        private types: any[];
        private langs: any[];

        public dropDowns: any[] = [
              { data: countries },
              { data: types },
              { data: langs },
        ];

and in the template:

        <div *ngFor="let dropDown of dropDowns" class="md-form form-lg">
         <select name="function">
          <option *ngFor="let option of dropDown.data" value={{option .id}} required>{{option .value}}</option>
         </select>
        </div>

with this you have an array on dropdowns and each have an array of data. then the template must only display the property dropDown.data of each element on the dropDown array

Answer 2

you can try with this solution

put proper synax of *ngFor="let dropdown of ListOfDropdown" and [value]="option.id"

<div *ngFor="let dropdown of ListOfDropdown" class="md-form form-lg">
<select name="function">
     <option *ngFor="let option of optionList" [value]="option.id" required>{{option .value}}</option>
</select>
</div>