2017-02-17 9 views
0

我Angular2的應用程序有下拉元件與3個選項組,它看起來像這樣:Angular2下拉列表中選擇元素不顯示當前值

<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個選項組。 有沒有其他的方式來做到這一點,或者可能有不同的組件能夠在單一選項組中擁有這些組?

回答

1

我整理終於通過試錯法。它像[ngValue]和[選擇]不能一起使用,或至少在我的應用程序中使用。選擇開始工作,當我刪除[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> 
2

您正在使用ReactiveModule表單。在這種形式下,您無需在每個option中設置[selected]。即使你不需要設置[selected]屬性添加爲選定的設置。只需設置模型值,您將角度更新您的用戶界面。

在你的代碼把這個代碼component

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

嗯,我以爲相同,但不知何故選擇元素不炒鍋。當我將其更改爲常規輸入而不是下拉菜單時,它絕對沒問題。這實際上是造成問題的唯一形式因素,所以我認爲有一些更好的替代品。 – smoczyna

+0

你可以爲我們提供plunker鏈接,以便你的問題,所以我們可以更新更好的解決方案 –

+0

不幸的是,我不能,這是我的工作的一部分。我只能在這裏更新我的問題。正如我所說這是在angular2中的下拉元素的某種類型的問題,因爲這個問題存在於每個包含select元素的頁面上。我的另一個想法是使用隱藏的輸入元素作爲窗體控件,然後與選擇元素同步,但我不知道如何做到這一點。 – smoczyna

相關問題