使用 ngx-translate 选择 FormControl 上的 setValue - Angular 2答案

【问题标题】：setValue on select FormControl with ngx-translate - Angular 2使用 ngx-translate 选择 FormControl 上的 setValue - Angular 2
【发布时间】：2018-05-01 11:41:27
【问题描述】：

我在反应式表单中有一个 select FormControl，我正在使用来自 ngx-translate 库的管道翻译。在我创建 FormGroup 时初始化 FormControl 时，该值在 DOM 中反映得很好，您实际上可以看到翻译。但是，当我尝试在 FormControl 上重置、setValue 或 patchValue 时，管道转换似乎根本不喜欢它。重置后，我可以控制台记录 FormControl 的值，并实际看到值的变化。它只是没有反映 DOM 中的这种变化。我还尝试将 (ngModelChange) 添加到 FormControl 以在重置后观察值的变化，这也可以，但不会在 DOM 中反映出来。我想要的结果是使用重置，因为我可以一次性设置控件的值并重置控件的状态。这是我见过的最奇怪的行为，我无法弄清楚。如果我删除管道转换值的重置工作得很好，并反映了 DOM 中的值。任何帮助，将不胜感激！下面是代码：

this.shopInfoForm = this._formBuilder.group({
  name: [this._settings.name],
  brand: [this._settings.brands[0]],
  language: [this._settings.language]
});

get language() { return this.shopInfoForm.get('language'); }

this.language.reset(this._settings.language);

<div class="input-group">
  <span class="input-group-addon">Language</span>
  <select formControlName="language" class="form-control">
    <option *ngFor="let language of languages">{{language.langLabelId.toString() | translate}}</option>
  </select>
</div>

【问题讨论】：

标签： angular typescript ngx-translate

【解决方案1】：

以防万一有人遇到同样的问题。这一切都与选项标签上的 value 属性有关。我将 DOM 中的代码更新为如下所示：

<option *ngFor="let language of languages" value="{{language.langLabelId}}">{{language.langLabelId.toString() | translate}}</option>

它现在工作得很好。

【讨论】：