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

您可以使用单击选项上的功能，并使用组件中的功能分配所选的功能，如下所示：

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

Angular2 ngModel选择 - 处理对象

3 个答案: