动态 FormGroup 上的 ngFor 未更新答案

【问题标题】：ngFor on dynamic FormGroup not updating动态 FormGroup 上的 ngFor 未更新
【发布时间】：2020-02-21 04:36:58
【问题描述】：

我尝试了几个不同的选项，但似乎都无法正常工作。我有一系列动态构建的嵌套响应式表单控件，并且我正在尝试呈现 UI 元素以响应对正在构建的响应式表单的更改。

不幸的是，当我对响应式表单进行更改时，UI 元素没有正确更新。似乎在调用addControl 时，在FormGroup 的controls 属性上使用*ngFor 不会正确更新。

我创建了一个 StackBlitz 示例来演示我看到的行为。

https://stackblitz.com/edit/angular-rkoxfw

谢谢！

【问题讨论】：

标签： angular angular-reactive-forms

【解决方案1】：

它不是| key 是| keyvalue，并在输入中使用<input [formControl]="item.value">，

<div [formGroup]="form" *ngIf="form">
  <ng-container *ngFor="let item of form.controls | keyvalue">
    <div>
      {{ item.key }}<input [formControl]="item.value">
    </div>
  </ng-container>
</div>

查看您的forked stackblitz

【讨论】：

我不知道keyvalue 管道，谢谢！我将它插入到我的真实用例中，但它仍然无法正常工作。我注意到 keyvalue 管道是不纯的，我确实对此进行了探索，但它使浏览器选项卡崩溃了，所以我将尝试更新我的 StackBlitz 以找出它仍然无法正常工作的原因。

【解决方案2】：

定义一个getter怎么样？

模板：

div [formGroup]="form" *ngIf="!!form">
  <ng-container *ngFor="let key of controlKeys">
    <div>
      {{ key }}: {{ form.value[key] }}
    </div>
  </ng-container>
  <div>
    <button type="button" (click)="add()">Click Me!</button>
  </div>
</div>

组件：

get controlKeys() {
  return Object.keys(this.form.controls);
}

【讨论】：

你也可以使用键值管道