迭代ngFor中的反应形式数组对象答案

【问题标题】：Iterate over reactive form array object in ngFor迭代ngFor中的反应形式数组对象
【发布时间】：2018-11-06 18:47:32
【问题描述】：

我在 Angular v6 中遇到了一个与角反应形式有关的奇怪问题。
我在 angular v1.2、v1.6 和 v1.7 中使用了表单数组。我最近将我的 CLI 升级到了最新版本的 Angular CLI v6.0.5。

相同的源代码在以前的版本中工作得很好，但在最新的 CLI 中却不行。

我收到的错误如下：

找不到不同类型的支持对象“[object Object]” '目的'。 NgFor 只支持绑定到 Arrays 等 Iterables。

对象本身如下所示：

createForm(): void {
    this.mainForm = this.formBuilder.group({
        itemRows: this.formBuilder.array([
             this.initForm()
         ])
    });
}

initForm(): FormGroup {
    return this.formBuilder.group({
        item1: ['', [Validators.required]]
        // other form controls created here.
    })
}

Angular 抱怨 this.mainForm.controls.itemRows 不能被迭代。但是，请注意 this.mainForm.controls.itemRows 是一个表单array。

错误显示在视图中的这一行：

<form [formGroup]="mainForm">
    <div formArrayName="itemRows"> <!-- Problem here in v6 -->
        <div *ngFor="let itemRow of mainForm.controls.itemRows">
            <!-- rest of the form -->
        </div>
    </div>
</form>

我发现建议 (link1) (link2) (link3) 建议我从对象创建了一个数组，但它对我来说看起来并不干净，尤其是在处理像反应形式这样的复杂对象时。有人用最新的 CLI 遇到过这个问题吗？

另外，为什么要改变过去完美运行的东西？只是说说而已。

【问题讨论】：

标签： html angular angular-cli-v6

【解决方案1】：

itemRows 是一个对象。

可以这样迭代

<div *ngFor="let itemRow of mainForm.controls.itemRows.controls">

【讨论】：

我无法理解您的评论
我的意思是说这很容易解决。我不敢相信我没有考虑过。它为我指明了正确的方向。非常感谢。
好吧，在这种情况下，您可以支持我的回答。 :P