我在FormArray中有一个select标签,我已经使用api中的http获取了该选项的选项。我有以下错误帮助我。
CashPluckingLeafComponent.html:44错误错误:找不到差异 支持'object'类型的对象'[object Object]'。仅限Ng 支持绑定到诸如Arrays之类的Iterables。
<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(成绩)
(2)[对象,对象] 0:对象 1:对象 长度:2
答案 0 :(得分:1)
您遇到的问题是名称重叠。要迭代的数组与您在模板中迭代的表单数组中的每个表单对象具有相同的名称:
<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">