如何为多个下拉菜单绑定选定的选项值？答案

【问题标题】：How to bind selected option value for more than one drop down?如何为多个下拉菜单绑定选定的选项值？
【发布时间】：2019-04-03 20:11:49
【问题描述】：

我有一个动态数组，例如：说它的长度是 3，选择下拉列表中的值后会显示另外三个下拉列表。接下来在每个下拉列表中选择值后，应显示每次图像。如果我们有多个下拉菜单，任何人都可以告诉我如何为每个选择的值显示图像。

<div *ngFor="let optionValue of number_axles_array">
    Axle {{optionValue}}
    <div>
        Axle type:<br> 
        <select [(ngModel)]="optionValue" (change)="onChangeAxle($event.target.value)">
            <option *ngFor="let taxel of type_axles_array" [ngValue]="taxel.id">{ taxel.type }}</option>
        </select>
        <div (ngModel)="optionValue"*ngIf="multipleSelect">
            <img src="assets/imagename/name.png">    
        </div>
    </div>
</div>

如果我们有多个下拉菜单，则应为下拉菜单中的每个值显示图像。

【问题讨论】：

准备堆栈闪电战。 stackblitz.com
请查找问题场景：-stackblitz.com/edit/…。应为每个下拉更改显示图像，但在第一次单击时输出所有下拉。请帮我解决这个问题。
对于初学者，您不能为每个select 使用相同的模型字段，除非这是故意的。
这是我们从客户端收到的要求，number_axles_array 是用户选择的动态数组，例如：比如3。应该显示下三个相同模型字段的下拉列表。图像应显示在客户为每个下拉菜单选择的值上。
但是拥有数组并不意味着你会绑定到同一个字段。你必须绑定到数组，这不是它的完成方式。每个选择都必须绑定到单独的数组元素。

标签： angular

【解决方案1】：

老实说，我只能假设您想做什么，因为我不清楚您的描述。这里的假设是您希望在每个选择框上选择后显示图像。工作示例在这里

https://stackblitz.com/edit/angular-3hxg2n?file=src/app/app.component.html

我做了什么

模板

<div *ngFor="let selection of selections">
  Axle {{selection.value}}
  <div >
    Axle type:<br> <select [(ngModel)]="selection.value" (change)="onChangeAxle($event.target.value)">
      <option *ngFor="let taxel of ['drive','steer']">
        {{ taxel }}        
      </option>
    </select>
    <div (ngModel)="optionValue" *ngIf="multipleSelect && selection.value">
     <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQS-I2Dee6yl3TqOv7DIeKB0jqHx1gu9xGv4BpSPoDuuvb0ZFQ7">
    </div>
  </div>
</div>

组件

selections = [];
  ngOnInit() {
    for (let i = 0; i < 4; i++) {
      this.selections.push({
        idx:i,
        value:""
      })
    }
  }

结果

【讨论】：

@VasukiHebbar 考虑支持并接受答案，因为它解决了问题。