Angular：如何在嵌套循环中创建动态下拉菜单

Question

我在弄清楚如何制作一个直接显示用户选择内容的角度下拉菜单时遇到了很多麻烦。我要创建卡片，每张卡片都应包含一个下拉菜单，其中包含（随机）值。

Cars是JSON字符串，并且shuffle函数返回对应键的随机组合数组。我的代码当前如下所示：

<div class="row">
   <div *ngFor="let item of cars| keyvalue" class="card bg-light col-sm-12 col-md-6 col-lg-3 my-2">
      <p class="card-text">
         {{ item.value }}
      </p>
      <div class="form-group col-5">
         <select class="form-control" [(ngModel)] = "dropSelect">
         <option *ngFor='let car of shuffle(cars); let i = index'  selected ="selected" [attr.id]="'Drop' + i">{{car}}</option>
         </select> 
         <p>Selected option: {{dropSelect}}</p>
      </div>
   </div>
</div>

[当我从下拉菜单中选择一个项目时，“选择的选项”部分也会显示所有其他卡上的选择，但我只想在选择了该项目的卡上显示它。

Answer 1

使用[ngValue]而不是[selected]。它可能会起作用。

您可以检查here