Angular2ドロップダウン選択要素は、現在の値を表示しない

Question

マイAngular2アプリは3つのオプショングループとドロップダウン要素を持っている、それは次のようになります。

<select formControlName="reasonCode" id="reasonCode" class="form-control"> 
     <option value="" [ngValue]="null"></option> 
     <option *ngFor="let reason of otherLeavingReasons" [ngValue]="reason.longName"> 
     {{reason.longValue}} 
     </option> 
     <optgroup label="Managed"> 
     <option *ngFor="let reason of managedLeavingReasons" [ngValue]="reason.longName"> 
      {{reason.longValue}} 
     </option> 
     </optgroup> 
     <optgroup label="Unmanaged"> 
     <option *ngFor="let reason of unmanagedLeavingReasons" [ngValue]="reason.longName"> 
      {{reason.longValue}} 
     </option> 
     </optgroup> 
    </select> 

私は位置にオプショングループのそれぞれにこの作品を追加しました現在の値の要素：

[selected]="reason.longValue == eventForm.controls['reasonCode'].value.longValue" 

問題は機能しないということです。私はそれが3つのオプショングループの存在のためだと思う。 そのようなグループを単一のオプショングループに含めることができる他の方法や、おそらく異なるコンポーネントがありますか？

Answer 1

にこのコードを置きます。それは[ngValue]のように思えるし、[selected]は一緒に、または少なくとも私のアプリで使用することはできません。 [ngValue]を削除すると、選択が機能し始めました。 最終的な推奨ソリューションではありませんが、この場合は機能します。最終的な作業コードは次のようになります。

<select formControlName="reasonCode" id="reasonCode" class="form-control" (change)="markTouched('reasonCode')"> 
     <option value=""></option> 
     <option *ngFor="let reason of otherLeavingReasons" [selected]="reason.longValue == eventForm.controls['reasonCode'].value"> 
     {{reason.longValue}} 
     </option> 
     <optgroup label="Managed"> 
     <option *ngFor="let reason of managedLeavingReasons" [selected]="reason.longValue == eventForm.controls['reasonCode'].value"> 
      {{reason.longValue}} 
     </option> 
     </optgroup> 
     <optgroup label="Unmanaged"> 
     <option *ngFor="let reason of unmanagedLeavingReasons" [selected]="reason.longValue == eventForm.controls['reasonCode'].value"> 
      {{reason.longValue}} 
     </option> 
     </optgroup> 
    </select> 

Answer 2

ReactiveModuleフォームを使用しています。この形式では、optionごとに[selected]を設定する必要はありません。 [selected]アトリビュートを選択してセットとして追加する必要はありません。ちょうどモデルの値を設定すると、あなたの角度はあなたのUIを更新します。あなたのコードで

は私が試行錯誤の方法で最終的にそれをソートcomponent

this.form.controls['reasonCode'].patchValue("myvalue");