NgFor only supports binding to Iterables such as Arrays. Angular 12 error

Question

paymentOptions = 
[
  {
    "key":"COD",
    "value":"COD"
  },
  {
    "key":"ONLINE",
    "value":"ONLINE"
  }
];

I have an array of objects in my component ts file when I loop it in html file using ngFor

<div *ngFor="let obj of paymentOptions">
    <input type="checkbox" value = "{{obj.value}}">{{obj.key}}
</div>

My data print but I get an error in console as Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

I do not see a problem in your code. Could you check maybe there is another *ngFor in your code which might be iterating on an object instead of an array? — mak15, Oct 11 '21 at 04:11
yes I have another loop and when I comment that loop I dont see any error — Soumyo Deepto, Oct 11 '21 at 04:35
For Objects, there is a pipe available, refer this https://stackoverflow.com/questions/35534959/access-key-and-value-of-object-using-ngfor — mak15, Oct 11 '21 at 04:45

score 0 · Answer 1 · edited Oct 11 '21 at 07:21

0

public payngFor=[];

paymentOptions.foreach(element =>{

  payngFor.push(element);

});

and in HTML loop the payngFor it will work.

edited Oct 11 '21 at 07:21

Nicho

606
1
10
24

answered Oct 11 '21 at 04:14

Sai Ramakanth Kodi

1
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 11 '21 at 07:49

score 0 · Answer 2 · answered Oct 11 '21 at 04:21

0

Your code should be like below

<div *ngFor="let obj of paymentOptions">
    <input type="checkbox" [value]="obj.value">{{obj.key}}
</div>

For more details refer below links binding-syntax, interpolation, template-statements

answered Oct 11 '21 at 04:21

KEVAL PANCHAL

535
3
14

score 0 · Answer 3 · answered Oct 12 '21 at 15:23

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Your provided code doesnt reproduce the error. I assume there is another loop in your template trying to Iterate over incompatible data type.

Reason for this error is basically you are trying iterate over a string, object or any other sort of data type rather than the type being an array. It gets thrown from template where you are using *ngFor.

Please refer to sample stackblitz code snipet here

NgFor only supports binding to Iterables such as Arrays. Angular 12 error

3 Answers3