1

我的 FormArray 中有一个选择标签，我已经使用来自 api 的 http 获取了该选择的选项。我有以下错误帮助我。

CashPluckingLeafComponent.html:44 ERROR 错误：找不到“object”类型的不同支持对象“[object Object]”。NgFor 仅支持绑定到 Iterables，例如 Arrays。

在此处输入图像描述 在此处输入图像描述

 <div formArrayName="leaf_grade">
                    <div *ngFor="let grades of cplForm.controls.leaf_grade.controls; let i=index">
                        <div [formGroupName]="i">
                            <div class="form-group">
                                <label>Leaf Grade {{i + 1}}</label>
                                <select name="grade" formControlName="grade" class="form-control" id="grade">

                                    <option *ngFor='let lg of grades' [value]="lg.name">{{ lg.name }}</option>
                                </select>
                                <small *ngIf="!cplForm.controls.leaf_grade.controls[i].controls.grade.valid && cplForm.controls.leaf-grade.controls[i].controls.grade.touched">
                                    Leaf Grade is required
                                </small>
                                <div>
                                    <span *ngIf="cplForm.controls.leaf_grade.controls.length > 1" class="remove-form-control">
                                        <a (click)="removeGradeData(i)">
                                        <i class="fa fa-times fa-fw" aria-hidden="true"></i> Remove
                                        </a>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

成绩包含来自 console.log(grades)

(2) [对象，对象] 0：对象 1：对象长度：2

4

1 回答 1

2

您遇到的问题是您的名称重叠。您要迭代的数组与您在模板中迭代的表单数组中的每个表单对象具有相同的名称：

<div *ngFor="let grades of cplForm.controls.leaf_grade.controls; let i=index">

所以现在在你的模板中，Angular 正在尝试迭代表单组 而grades不是你的. 您需要重命名，例如表单数组的迭代......grades

<div *ngFor="let gradesGroup of cplForm.controls.leaf_grade.controls; let i=index">
于 2017-07-03T12:30:38.350 回答