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

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>

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

标签： angular

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

结果是