如何将选定的选项值绑定多个下拉列表？

Question

我有一个动态数组，例如：说它的长度是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>

如果下拉列表中有多个下拉列表，则应该为下拉列表中的每个值显示图像。

Answer 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:""
      })
    }
  }

结果