Cannot find a differ supporting object '[object Object]'

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

You're passing an object to *ngFor but it only supports an array. I don't see a way to help from here, because it's not possible to derive from the provided information what exactly is passed to *ngFor. — Günter Zöchbauer
add the data format what you are trying to loop. The error explains you are trying to loop objects or something else instead of Array — mayur
console.log(grades) outputs : (2) [Object, Object] 0: Object 1: Object length: 2 — Sagun Gautam

AJT82 AJT82 · Accepted Answer · 2017-07-03T12:30:38

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">

Cannot find a differ supporting object '[object Object]'

1 Answers