Angular2 ngModel select——处理一个对象

Question

我有以下结构:

 <select ngbDropDown class="form-control" id="disk1" required [(ngModel)]="disk1" name="resourceA">
     <option *ngFor="let r of disks" [value]="r">{{r.name}}</option>
 </select>

我想把r对象传递给ngModel的disk1，它是我的组件中的一个属性:

disk1 = new Disk();

然而，如果我试图在改变选择框后访问它，我得到未定义:

console.log("Disk1 id: " + this.disk1.id);

任何想法?谢谢!

Answer 1

您可以使用ngValue而不是简单的值绑定来将对象绑定到option元素。

<select [(ngModel)]="model.selectedItem" name="selectItem">
    <option *ngFor="let item of items" [ngValue]="item">{{item.title}}</option>
</select>

Answer 2

您可以使用functions on click作为选项，并在组件中使用函数为选中的选项分配，如下所示:

<select ngbDropDown class="form-control" id="disk1" required [(ngModel)]="disk1" name="resourceA">
     <option *ngFor="let r of disks" [value]="r" (click)="selected(r)">{{r.name}}</option>
 </select>

在你的组件中，你应该有这样的内容:

.Class({
   constructor: function() {},
   selected: function(element){
     this.disk1 = { name:"MyDisk", content: element.content, id: element.id };
   }
})

Answer 3

这对我很有效。希望能有所帮助:

<select [(ngModel)]="disk1" required>
     <option *ngFor="let r of disks" [value]="r">{{r.name}}</option>
</select>