How to pass the value for the dropdown from using each method and input decorator in angular 14-CodePudding

Trying to set the values for the dropdown using foreach method, But not working properly. It is loading 5 times for each dropdown. I want to show the proper value for the dropdown. Example: For Car dropdown I want to show only the value of Car from the array. Same like for others. So, How to do it?

main.component.html:

<div

style="width:400px;"
*ngFor="let v of vehicle; index as i"
>
<p>{{ v }}</p>
<app-vehicle [data]="travals"></app-vehicle>
</div>

Demo: https://stackblitz.com/edit/angular-ivy-yxfoyl?file=src/app/main/main.component.html

CodePudding user response：

This's what you need?

vehicle.component.html

<select>
  <option
    *ngFor="let vehicleType of data; index as i"
    value="{{ vehicleType }}"
    label="{{ vehicleType }}"
  ></option>
</select>

main.component.html

<div
  
  style="width:400px;"
  *ngFor="let v of vehicle; index as i"
>
  <p>{{ v }}</p>
  <app-vehicle [data]="travals[v]"></app-vehicle>
</div>