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

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.

CodePudding user response：

public payngFor=[];

paymentOptions.foreach(element =>{

payngFor.push(element);

});

and in HTML loop the payngFor it will work.

CodePudding user response：

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