0

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' }
       ] 
    } 
 ];
User
  • 385
  • 8
  • 21

1 Answers1

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>
KShewengger
  • 7,853
  • 3
  • 24
  • 36
  • I am getting this error if I put the inner array inside items. Type '[{ label: string; }, { label: string; }]' has no properties in common with type 'MenuItem'.ts(2559) – User Nov 26 '20 at 07:27
  • Have updated my answer above. Seems like you want to use MenuItem but in your template you are using MegaMenuItem – KShewengger Nov 26 '20 at 09:26
  • @User no problem :) hoping you can mark the answer as the accepted one as well, that would be very much appreciated. Thank you very much! – KShewengger Nov 26 '20 at 10:31