Angular 7 反应式表单下拉选项未更新答案

【问题标题】：Angular 7 Reactive Form Dropdown Options Are Not UpdatingAngular 7 反应式表单下拉选项未更新
【发布时间】：2021-02-26 11:02:59
【问题描述】：

这是一个示例代码在初始负载下降时，显示 ng form down 值。

HTML 代码

<form [formGroup]="testForm">
    <select formControlName="controlerName">
        <option *ngFor="let option of controlValues" [value]="option.id"> 
            {{option.values}}
        </option>
    </select>
</form>

Ts 文件

this.controlValues = [{id: "1", values: "1"}, {id: "2", values: "2"}] ..so on
this.testForm.controls['controlerName'].setValue(this.controlValues[0].values);

点击按钮

this.controlValues = [{id: "1", values: "a"}, {id: "2", values: "b"}] ..so on
this.testForm.controls['controlerName'].setValue(this.controlValues[0].values);

但在下拉列表中，它显示了相同的先前值。但变量正在获取更新的值。注意：这只是一个示例代码。假设没有放置确切的代码。不使用订阅的数据值。 this.controlValues 变量值需要在 HTML 下拉菜单中更改。

【问题讨论】：

您能否正确格式化您的代码，使其更具可读性？和/或粘贴一些代码块，否则很难给你答案。
可能是因为您使用的是[value]="option.value_id"，它应该是[value]="option.id"？
@DaneBrouwer 更新的值显示在 this.controlValues 但下拉值不会刷新为新值和 [value]="option.id"
你能做一个堆栈闪电战来复制这种行为吗？ Angular 似乎不太可能检测到这些变化。
抱歉，您必须提供更多代码，因为您发布的代码按原样运行。

标签： angular typescript angular-reactive-forms

【解决方案1】：

我也有同样的问题。在将 BrowserAnimationsModule 导入我的应用程序模块后，我意识到问题开始出现。尽管选择在内部反映，但选择下拉值未在视图中更新。

@Component({animations: [trigger('', [])]}

添加这个似乎可以解决问题

【讨论】：