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下拉列表中选择元素不显示当前值

回答

相关问题