2016-08-16 5 views
2

以下のように「選択」ドロップダウンリストに双方向データバインドすることは可能ですか?選択要素に双方向データバインドを試みることに問題があります

<select [(ngModel)]="selectedSport"> 
    <option *ngFor="let s of sports" [value]="s">{{s.Name}}</option> 
</select> 

私は動作させることができません。私はIDだけをバインドしようとしましたが、そのIDを取得することはできません。 See Plnkr here

私は、角度サイトから 'quickstart' live plnkrの例をベースとして使用しました。

私が手にエラーがある:それは「選択」の既知のプロパティではありませんので、

は「ngModel」にバインドできません。

更新

おかげギュンター。私はRC4からRC5に更新する必要があることを認識しました。私は角型の "form" plnkrの例を使って同じことを試みました(つまり、フォームモジュールがロードされています)。私はまだRC5で動作させることができません。選択を「オブジェクト」にバインドすることは可能ですか、それとも数値のような値型でなければなりませんか?ありがとうございました。

Second plnkr

ソリューション

ギュンターの回答とコメントの両方を参照してください。 RC4からRC5にアップグレードし、FormsModuleをインポートし、 'option'要素で[value]の代わりに[ngValue]を使用する必要がありました。

<select [(ngModel)]="selectedSport"> 
    <option *ngFor="let s of sports" [ngValue]="s">{{s.Name}}</option> 
</select> 
+0

をロードする必要があります。 –

答えて

1

あなたは私の答え以下のコメントを参照してくださいフォームモジュールに

import { FormsModule } from '@angular/forms'; 

@NgModule({ 
imports: [ FormsModule, ... ], 
+1

私も '[value]'がRC.5でオブジェクトをサポートしているという印象を受けましたが、これはそうではないようです。文字列以外の値については、 '[ngValue] =" "..." 'http://plnkr.co/edit/CG7btYCdRZQ2OgAyChn5?p=preview –

+1

を使用する必要があります。 Günterにとても感謝します。今私はRC4から5にアップグレードする必要があります:) – user2444499

関連する問題