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

Question

我在获取从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>

其中plans定义为对象数组:

[{ name: 'Plan 1' }, { name: 'Plan 2' }]

如果您尝试输出所选对象的某个键的值,则不会显示任何内容:

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

这是Angular2表单现场演示的一个分支,显示了这个问题.从选择列表中选择"计划2",然后看到没有显示任何内容.

这里发生了什么？

Answer 1

使用对象作为值使用[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>

Plunker的例子

model需要指向其中一个元素plans作为默认值(它需要是同一个实例,而不是另一个包含相同值的实例).