Nhận các thuộc tính đối tượng qua danh sách chọn ngModel trong Angular 2?

Question

Tôi gặp sự cố khi tìm nạp thuộc tính của đối tượng đã được chọn từ danh sách chọn trong Angular 2 (RC1). Đi theo cú pháp sau:

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

đâu plans được định nghĩa là một mảng của các đối tượng:

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

Nếu bạn cố gắng và đầu ra giá trị của một trong những chìa khóa của đối tượng được lựa chọn, không có gì dường như là được hiển thị:

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

Here is a fork of the Angular2 form live demo, hiển thị vấn đề này. Chọn "Plan 2" từ danh sách lựa chọn, và thấy rằng không có gì được hiển thị.

Điều gì đang xảy ra ở đây?

Answer 1

Để sử dụng các đối tượng làm giá trị sử dụng [ngValue] thay vì [value]. [value] chỉ hỗ trợ id chuỗi.

<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 nhu cầu để trỏ đến một trong các yếu tố trong plans để làm việc như giá trị mặc định (nó cần phải được cùng một ví dụ, không một ví dụ chứa các giá trị như nhau).

Answer 2

Theo như tôi có thể thấy, vẫn có sự cố với liên kết hai chiều với số select. Vì vậy hãy thử này:

Template

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

Component Lớp

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

Không thể thử nó, vì một lý do plunkr chưa bao giờ làm việc cho tôi.