2

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

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

我收到的错误如下：

找不到“object”类型的不同支持对象“[object Object]”。NgFor 仅支持绑定到 Iterables，例如 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是一个表单数组。

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

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

另外，为什么要改变过去完美工作的东西？只是说。

4

1 回答 1

4

itemRows 是一个对象。

可以这样迭代

<div *ngFor="let itemRow of mainForm.controls.itemRows.controls">
于 2018-05-28T08:37:31.267 回答