Cannot find a differ supporting object '[objec

Question

I have a select tag inside my FormArray and i have fetched option for that select using http from the api. I have following error help me.

CashPluckingLeafComponent.html:44 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as 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>

grades contain from console.log(grades)

(2) [Object, Object] 0: Object 1: Object length: 2

Answer 1

The problem you have is that you have overlapping names. The array you want to iterate has the same name as each form object in your form array that you are iterating in your template:

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

So now in your template Angular is trying to iterate the form group grades instead of your array of grades. You need to rename either, for example the iteration of the form array...

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