如何使用 angular 14 中的每個方法和輸入裝飾器傳遞下拉列表的值

Question

嘗試使用 foreach 方法設置下拉列表的值，但無法正常工作。 每個下拉菜單加載 5 次。 我想顯示下拉列表的正確值。 示例：對於 Car 下拉列表，我只想顯示數組中 Car 的值。 和其他人一樣。 那么，該怎么做呢？

main.component.html：

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

演示： https://stackblitz.com/edit/angular-ivy-yxfoyl?file=src%2Fapp%2Fmain%2Fmain.component.html

Answer 1

這就是你需要的？

車輛組件html

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

main.component.html

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