Console error in Angular 10 when page loads

Question

I am preparing an array like the below when my page load (ngOnInit() method). But when the page loads I am getting an error in console as

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

which is not happening with Angular earlier versions.

I am using primeng to display the data on html

How can I prepare the arrays which will not get the console error.

Thanks in advance.

<p-megaMenu [model]="infoItems" (click)="click($event)"></p-megaMenu>

import { MenuItem } from 'primeng/api'

infoItems: MenuItem[];

this.infoItems = [
    { 
       label: 'Configuration Data', 
       icon: 'fa fa-fw icon-configuration', 
       items: [
          { label: 'Preview Configuration'}, { label: 'Configuration label' }
       ] 
    } 
 ];

Answer 1

Based on PrimeNg's Mega Menu Documentation, seems like you forgot to put an inner array [] inside your items.

BUT, have noticed, on your template you are using MegaMenuItem but on your component, you are using the MenuItem type

You can choose any of these samples if you want to use either of those

1.) MegaMenuItem

<p-megaMenu [model]="infoItems" (click)="click($event)"></p-megaMenu>

infoItems: MegaMenuItem[];

this.infoItems = [
  {
    label: 'Configuration Data',
    icon: 'fa fa-fw icon-configuration',
    items: [ [ { label: 'Preview Configuration'}, { label: 'Configuration label' }  ] ]
  }
];

2.) MenuItem

If you want to use MenuItem, you don't have to change anything in your data, instead change your template instead:

<p-menu [model]="infoItems" (click)="click($event)"></p-menu>