Angular 角度2动态创建选择和设置选定选项（编辑操作）

我正在尝试编辑用户。该用户具有非基本机器数组。在编辑时，我想使用“选择”选项创建新元素，并将“选择”选项设置为“来自用户对象的值”：

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"
        }
    ]

在编辑时，我想将select值设置为用户机器的相应对象

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

采摘机
{{mach.name}

问题在于：

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

更新（解决方案）：

忘了提了，那个部门在里面

采摘机
{{mach.name}

如果在表单中，元素的名称实际上已提交

每个输入元素都有Angular所需的name属性 窗体将控件注册到窗体

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

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

{{mach.name}

您应该设置数组特定索引的

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>

采摘机
//或者您可以直接设置“id”
{{mach.name}

您应该设置数组特定索引的

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>

采摘机
//或者您可以直接设置“id”
{{mach.name}

machine是对象数组中的一个对象……是的，我将它设置在这个用户的数组的特定索引上。machines[i]那么你应该使用它：

[（ngModel）]=“machine.id”

当我有对象绑定时，我不能这样做，而不是id（原语类型）bindingmachine是对象数组中的一个对象…是的，我将它设置在这个用户的数组的特定索引上。machines[i]那么你应该使用它：

[（ngModel）]=“machine.id”

当我有对象绑定，而不是id（原语类型）绑定时，我不能这样做问题是，当与

ngModel

和

ngValue

绑定时，它需要相同的对象引用

user.machine[0]

和

machines[0]

具有相同的结构和内容，但没有指向内存中的同一对象，因此它不起作用。它们指向相同的，在.ts中我设置了这个.user.machines[i]=this.machines[j]，否则它不应该显示任何内容，属性“name”必须是唯一的。谢谢。问题是，当与

ngModel

和

ngValue

绑定时，它需要相同的对象引用

user.machine[0]

和

machines[0]

具有相同的结构和内容，但没有指向内存中的同一对象，因此它不起作用。它们指向相同的，在.ts中我设置了这个.user.machines[i]=this.machines[j]，否则它不应该显示任何内容，属性“name”必须是唯一的。非常感谢。