Angular2下拉列表中選擇元素不顯示當前值

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

來源

2017-02-17 smoczyna

我整理終於通過試錯法。它像[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>

來源

2017-02-20 13:53:39 smoczyna

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

在你的代碼把這個代碼component

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

來源

2017-02-17 17:07:02

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

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

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

Angular2下拉列表中選擇元素不顯示當前值

回答

相關問題