Primeng megamenu error

0
votes

I am implementing the simple primeng megamenu. I am getting the following error. Can anyone please help whats wrong with my code and how to fix if there is an issue? I followed the sample code mentioned in primeng. The following code only displays the top menu item and not the submenu items.

Primeng version i am using is : ~4.1.0

Component:

        import { MegaMenuModule } from 'primeng/primeng';
        <p-megaMenu [model]="items"></p-megaMenu>

items: Array<MenuItem>;
    this.items = [
        {
            label: 'TV', icon: 'fa fa-fw fa-check',
            items: [
                {
                    label: 'TV 1',
                    items: [{ label: 'TV 1.1' }, { label: 'TV 1.2' }]
                },
                {
                    label: 'TV 2',
                    items: [{ label: 'TV 2.1' }, { label: 'TV 2.2' }]
                }
            ]
        },
        {
            label: 'Sports', icon: 'fa fa-fw fa-soccer-ball-o',
            items: [
                {
                    label: 'Sports 1',
                    items: [{ label: 'Sports 1.1' }, { label: 'Sports 1.2' }]
                },
                {
                    label: 'Sports 2',
                    items: [{ label: 'Sports 2.1' }, { label: 'Sports 2.2' }]
                }
            ]
        },
        {
            label: 'Entertainment', icon: 'fa fa-fw fa-child',
            items: [
                {
                    label: 'Entertainment 1',
                    items: [{ label: 'Entertainment 1.1' }, { label: 'Entertainment 1.2' }]
                },
                {
                    label: 'Entertainment 2',
                    items: [{ label: 'Entertainment 2.1' }, { label: 'Entertainment 2.2' }]
                }
            ]
        }
    ];

The output i get is: enter image description here Error:

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

Thanks

3
angularprimeng
code seems perfact !!, is this your original code or sample for the same? – Pardeep Jain
this is the original code. Since this is a component, the code is as below: @Component({ selector: 'app-menu', template: ` <p-megaMenu [model]="items"></p-megaMenu> ` }) – Mukil Deepthi
i import the MegaMenuModule from 'primeng/primeng' and not from 'primeng/megamenu'. that is the only difference – Mukil Deepthi
Have you tried importing from 'primeng/megamenu'? Were you facing the same problem with that? – Prachi

3 Answers

0
votes

Try declaring it as :

items: MenuItem[];
0
votes

MegaMenu uses the common menumodel api to define its items: Try to import these two modules as well. 

import {MenuModule} from 'primeng/menu';
import {MenuItem} from 'primeng/api';
0
votes

Inside items arrays of TV, Sports and Entertainment, don't put directly the objects. You have directly put the objects, that is why the error you have specified is coming. Put them inside another arrays the way I have shown below.

this.items = [
        {
            label: 'TV', icon: 'fa fa-fw fa-check',
            items: [
                [
                {
                    label: 'TV 1',
                    items: [{ label: 'TV 1.1' }, { label: 'TV 1.2' }]
                },
                {
                    label: 'TV 2',
                    items: [{ label: 'TV 2.1' }, { label: 'TV 2.2' }]
                }
            ]
        ]
        },
        {
            label: 'Sports', icon: 'fa fa-fw fa-soccer-ball-o',
            items: [
                [
                {
                    label: 'Sports 1',
                    items: [{ label: 'Sports 1.1' }, { label: 'Sports 1.2' }]
                },
                {
                    label: 'Sports 2',
                    items: [{ label: 'Sports 2.1' }, { label: 'Sports 2.2' }]
                }
            ]
        ]
        },
        {
            label: 'Entertainment', icon: 'fa fa-fw fa-child',
            items: [
                [
                {
                    label: 'Entertainment 1',
                    items: [{ label: 'Entertainment 1.1' }, { label: 'Entertainment 1.2' }]
                },
                {
                    label: 'Entertainment 2',
                    items: [{ label: 'Entertainment 2.1' }, { label: 'Entertainment 2.2' }]
                }
            ]
        ]
        }
    ];

*Note- Inside items array, we give another array to separate the items vertically. In your example, TV1 and TV2 will come in same column same for Sports1, Sports2 and Entertainment1, Entertainment2.

Image here

Suppose you want two columns for TV1 and TV2, then code would be

 this.items = [
        {
            label: 'TV', icon: 'fa fa-fw fa-check',
            items: [
                [
                {
                    label: 'TV 1',
                    items: [{ label: 'TV 1.1' }, { label: 'TV 1.2' }]
                }],[
                {
                    label: 'TV 2',
                    items: [{ label: 'TV 2.1' }, { label: 'TV 2.2' }]
                }
            ]
        ]
        },
        {
            label: 'Sports', icon: 'fa fa-fw fa-soccer-ball-o',
            items: [
                [
                {
                    label: 'Sports 1',
                    items: [{ label: 'Sports 1.1' }, { label: 'Sports 1.2' }]
                },
                {
                    label: 'Sports 2',
                    items: [{ label: 'Sports 2.1' }, { label: 'Sports 2.2' }]
                }
            ]
        ]
        },
        {
            label: 'Entertainment', icon: 'fa fa-fw fa-child',
            items: [
                [
                {
                    label: 'Entertainment 1',
                    items: [{ label: 'Entertainment 1.1' }, { label: 'Entertainment 1.2' }]
                },
                {
                    label: 'Entertainment 2',
                    items: [{ label: 'Entertainment 2.1' }, { label: 'Entertainment 2.2' }]
                }
            ]
        ]
        }
    ];

Image here

I have checked, it is working fine.