遍历 ngFor 中的反应式数组对象

Question

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

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

我收到的错误如下：

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

对象本身看起来像这样：

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 时遇到过这个问题？

此外，为什么要改变过去完美运行的功能？只是说.

Answer 1

itemRows 是一个对象。

可以这样迭代

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

遍历 ngFor 中的反应式数组对象

Iterate over reactive form array object in ngFor

html

angular

angular-cli-v6