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

Here is a fork of the Angular2 form live demo，显示此问题。选择＆＃34;计划2＆＃34;从选择列表中，看到没有显示任何内容。

这里发生了什么？

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 example

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

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

组件类

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

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

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

2 个答案: