ドロップダウンでAngular 4の設定を選択しました

Question

これと異なる回答についていくつかの質問があります。しかし、誰も本当にその質問に答えません。だからもう一度：

ドロップダウンの値を設定してデフォルトの設定は私の場合は動作しません。どうして？ これは、角度4のダイナミックなフォームのチュートリアルからです：

<select [id]="question.key" [formControlName]="question.key"> 
     <option *ngFor="let opt of question.options" [value]="opt.key" [selected]="opt.selected">{{opt.selected+opt.value}}</option> 
</select> 

それが何かを選択しdoesntの。利用可能なオプションは次のとおりです。

• trueaaa
• falsebbb
• falseccc

しかし、静真：

<option ... [selected]="true">...</option> 

は最後の値（すべて真）を選択します。 また、プライベート変数boolvar = trueと連携し、[selected]="boolvar"

でそれを使用して、私は「OPT」オブジェクトとクラス変数の違いを理解していけません？

Answer 1

あなたは真/偽の使用に基づいて値を選択したい場合は

= "opt.selected == true" を

<option *ngFor="let opt of question.options" [value]="opt.key" [selected]="opt.selected == true">{{opt.selected+opt.value}}</option> 

アウトcheckit

Angular 2 - Setting selected value on dropdown list

Answer 2

デフォルトとして値を選択したい場合は、フォームビルダで、それを価値与える：あなたのHTMLで今

this.myForm = this.FB.group({ 
    mySelect: [this.options[0].key, [/* Validators here */]] 
}); 

：

<form [formGroup]="myForm"> 
    <select [formControlName]="mySelect"> 
     <option *ngFor="let opt of options" [value]="opt.key">ANY TEXT YOU WANT HERE</option> 
    </select> 
</form> 

私のコードは、あなたの選択を与えているん何をあなたのオプションリストの最初の値に等しい値。これは、Angularでデフォルトとしてオプションを選択する方法です。選択は無用です。

Answer 3

[選択]

オプションタグから[選択]を削除：

<option *ngFor="let opt of question.options" [value]="opt.key"> 
    {{opt.selected+opt.value}} 
</option> 

そして、あなたのフォームビルダで追加します。

key: this.question.options.filter(val => val.selected === true).map(data => data.key)