Angular 2动态创建选择并设置选择的选项（编辑操作）

Question

即时通讯尝试编辑用户。该用户具有非原始的机器阵列。在编辑我想创建一个选择选项的新元素，并设置选择选项从用户对象价值：

export class User{ 
    constructor(
     private id: number, 
     private name: string, 
     private machines: Machine[] 
    ){} 
} 

export class Machine{ 
    constructor(
     private id: number, 
     private name: string, 
     private price: string 
    ){} 
} 

了JSON：

users =[ 
     { 
      "id":1, 
      "name":"Mike", 
      "machines":[ 
       { 
        "id":1, 
        "name":"bike", 
        "price":"10" 
       }, 
       { 
        "id":2, 
        "name":"boat", 
        "price":"100" 
       } 
      ] 
     } 
    ] 
machines =[ 
     { 
      "id":1, 
      "name":"bike", 
      "price":"10" 
     }, 
     { 
      "id":2, 
      "name":"boat", 
      "price":"100" 
     }, 
     { 
      "id":3, 
      "name":"car", 
      "price":"50" 
     } 
    ] 

在编辑我要选择的值设置为相应的来自用户的机器对象。

<div *ngFor="let machine of user.machines; let i = index"> 
    <label>Pick machine</label> 
    <div> 
     <select name="machine" [(ngModel)]="user.machines[i]"> 
      <option *ngFor='let mach of machines' [ngValue]='mach' >{{mach.name}}</option> 
     </select> 
    </div> 
</div> 

问题是这样的：

两个选择选项的设置好的最后一个。

UPDATE（溶液）：

忘记提到，该div是内部Template-Driven form。

<form #f="ngForm" *ngIf="user" (submit)="updateUser(f.valid)" novalidate> 
    <div *ngFor="let machine of user.machines; let i = index"> 
     <label>Pick machine</label> 
     <div> 
      <select name="machine" [(ngModel)]="user.machines[i]"> 
       <option *ngFor='let mach of machines' [ngValue]='mach' >{{mach.name}}</option> 
      </select> 
     </div> 
    </div> 
</form> 

如果在表单中实际提交了元素的名称。

每个输入元素都有一个角度所需的名称属性 表单向表单注册控件。

加入了独特的名字我解决我的问题：

<select name="machine_{{i}}" [(ngModel)]="user.machines[i]"> 
       <option *ngFor='let mach of machines' [ngValue]='mach' >{{mach.name}}</option> 

Answer 1

你应该设置的数组的特定索引的ngModel值：

<div *ngFor="let machine of user.machines; let i = index"> 
     <label>Pick machine</label> 
     <div> 
      <select name="machine" [(ngModel)]="machine.id"> 
       //or you can set the 'id' direct 
       <option *ngFor='let mach of machines' [ngValue]='mach' >{{mach.name}}</option> 
      </select> 
     </div> 
    </div>