角2：条件に基づいて選択する選択肢をどのようにするか？

Question

私はオブジェクトの配列からフォーム内の選択要素を構築しています。現在のオブジェクトの属性（myobject.is_default）に基づいてオプションの1つを選択します。

基本的なテンプレートコードは次のようになります。私は今、このような選択オプションを設定することができ

<select formControlName="template"> 
    <option *ngFor="let t of templates" [value]="t.id">{{t.title}}</option> 
</select> 

：

<select formControlName="template"> 
    <option *ngFor="let t of templates" [value]="t.id" [selected]="t.is_default ? 'selected' : ''">{{t.title}}</option> 
</select> 

しかし、私がいる問題は、どの状態HTML5の仕様であります：

選択された属性はブール値属性です。

http://www.w3.org/TR/html5/infrastructure.html#boolean-attributes：

要素にブール属性の存在が真 値を示し、属性が存在しないことは、偽の値を表します。

属性が存在する場合、その値はなし先頭または末尾に空白で、空の文字列 または属性の 正規名のASCII大文字と小文字を区別しない一致する値のいずれかでなければなりません。

次は、有効な同等と真である：

<option selected /> 
<option selected="" /> 
<option selected="selected" /> 
<option selected="SeLeCtEd" /> 

次無効です。

<option selected="0" /> 
<option selected="1" /> 
<option selected="false" /> 
<option selected="true" /> 

意味する：とすぐに選択した属性が存在しているとして、オプションが選択されています。だから、私はselectedを1つ以外のオプションで持たない方法が必要です。

同じ要素にngForと一緒に使用することはできませんので、ngIfは使用できません。

Answer 1

ngModelを使用して、選択する要素を設定することができます。

<select [(ngModel)]="selectedItem" formControlName="template"> 
    <option *ngFor="let t of templates" [value]="t.id">{{t.title}}</option> 
</select> 

とクラスの

var default = t.templates.find(v => v.is_default); 
selectedItem = default && default.length && default[0].id; 

Answer 2

は、モデル駆動型のアプローチを使用しているので、なぜ単にフォームコントロールグループの作成時にモデルに値を設定していませんか？

// select first (only?) default template 
let defaultTemplate = this.templates.some((template) => template.is_default); 
... 
// create your form group and pass default template id as value for template select 
this.yourForm = this.formBuilder.group({ 
    ... 
    template: [defaultTemplate && defaultTemplate.id], 
    ... 
}); 

Answer 3

オプションのテキストを取得するなど、より複雑な処理を行いたい場合は、オプションリストを複雑なオブジェクトにバインドします。

あなたのオブジェクトのインターフェイスを作成します。 export interface Day { id: number; text: string }

そして、そのためのいくつかの値を提供：あなたの選択リストを作成するテンプレートでそれを使用すると this.days = [ { id: 1: text: 'Monday'}, { id: 2: text 'Teusday'} ]

を。複合オブジェクトのバインドには、ngValueを使用することが重要です。その後 <select [(ngModel)]="configDatas.days" name="days"> <option *ngFor="let day of days" [ngValue]="day">{{day.text}}</option> </select>

、それは簡単です表示：例作業 <span>You selected DayId: {{configDatas.days.id}}, Text: {{configDatas.days.text}}</span>

：http://plnkr.co/edit/iSr9dpwa10tHwKM45FAE?p=preview