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>

问题出在：

两个选择选项都设置为最后一个。

更新（解决方案）：

忘了说，那个 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>

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

每个输入元素都有一个 Angular 所需的 name 属性 向表单注册控件的表单。

通过添加唯一名称我解决了我的问题：

<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>