通过Angular 2中的ngModel选择列表获取对象属性？

我在获取从Angular 2（RC1）中的选择列表中选择的对象的属性时遇到问题。采用以下语法：

<select required [(ngModel)]="model.plan">
  <option selected="selected" disabled>Plan...</option>
  <option *ngFor="#plan of plans" [value]="plan">{{ plan.name }}</option>
</select>

如果尝试输出选定对象的某个键的值，则不会显示任何内容：

<p>{{ model.plan?.name }}</p> // Shows nothing if a plan is selected

{{model.plan？.name}
//如果选择了计划，则不显示任何内容

，显示了这个问题。从选择列表中选择“Plan 2”，并查看没有显示任何内容

---

这是怎么回事？

据我所知，与

select

的双向绑定仍然存在问题。所以试试这个：

模板

<select required [(ngModel)]="model.plan" (change)="setPlan($event.target.value)">
    <option selected="selected" disabled>Plan...</option>
    <option *ngFor="#plan of plans" [value]="plan.name">{{ plan.name }}</option>
</select>

---

无法尝试，因为某些原因，plunkr从未为我工作。

要将对象用作值，请使用

[ngValue]

而不是

[value]

<代码>[value]仅支持字符串ID

<select required [(ngModel)]="model"> <!-- <== changed -->
  <option selected="selected" disabled>Plan...</option>
  <option *ngFor="#plan of plans" [ngValue]="plan">{{ plan.name }}</option>
</select>

计划。。。
{{plan.name}

模型

需要指向

计划

中的一个元素作为默认值（它需要是同一个实例，而不是包含相同值的另一个实例）

setPlan(value) {
    //if you're on older versions of ES, use for-in instead
    var plan = this.plans.find(p => p.name = value);

    if(plan) { this.model.plan = plan; }
}

<select required [(ngModel)]="model"> <!-- <== changed -->
  <option selected="selected" disabled>Plan...</option>
  <option *ngFor="#plan of plans" [ngValue]="plan">{{ plan.name }}</option>
</select>