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

Question

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

<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' }]

如果您尝试输出 selected 对象的其中一个键的值，似乎没有显示任何内容：

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

Here is a fork of the Angular2 form live demo，显示这个问题。 Select "Plan 2" 从 select 列表中，看到没有显示任何内容。

这是怎么回事？

Answer 1

据我所知，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>

组件Class

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 从未为我工作。

Answer 2

要将对象用作值，请使用 [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 中的元素之一才能用作默认值（它需要是相同的实例，而不是包含相同值的另一个实例）。

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

Getting object properties via ngModel select list in Angular 2?

angular2-forms

angular