Получение свойств объекта через список выбора ngModel в Angular 2?

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, показывающий эту проблему. Выберите «План 2» в списке выбора и убедитесь, что ничего не отображается.

Что здесь происходит?

Answer 1

Чтобы использовать объекты в качестве значений, используйте [ngValue] вместо [value]. [value] поддерживает только идентификаторы строк.

<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 никогда не работал для меня.