ngModel을 통해 객체 속성 가져 오기 목록을 각도 2로 선택 하시겠습니까?

Question

각도 2 (RC1)의 선택 목록에서 선택한 객체의 속성을 가져 오는 데 문제가 있습니다. plans이 객체의 배열로 정의

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

: 다음 구문을 가지고

[{ 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

개체를 값으로 사용하려면 [value] 대신 [ngValue]을 사용하십시오. [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에 대한 양방향 바인딩에는 여전히 문제가 있습니다. 그래서이 시도 :

템플릿 어떤 이유로 plunkr이 나를 위해 일한 적이있다 위해

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

은 그것을 시도 할 수 없습니다.