Primeng megamenu错误

Question

我正在实现简单的primeng megamenu。我得到了以下错误。谁能帮助我的代码哪里出了问题，如果有问题该如何修复？我遵循了primeng中提到的示例代码。下面的代码仅显示顶部菜单项，而不显示子菜单项。

我使用的Primeng版本是：~4.1.0

组件：

        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' }]
                }
            ]
        }
    ];

我得到的输出是：

错误：

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

谢谢

Answer 1

尝试将其声明为：

items: MenuItem[];

Answer 2

MegaMenu使用公共menumodel api来定义它的项:也尝试导入这两个模块。

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

Answer 3

在TV、Sports和Entertainment的项目数组中，不要直接放入对象。你已经直接放置了对象，这就是为什么你指定的错误即将到来。将它们放入另一个数组中，如下所示。

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' }]
                }
            ]
        ]
        }
    ];

*注意-在items数组中，我们给出另一个数组来垂直分隔项目。在您的示例中，TV1和TV2将出现在Sports1，Sports2和Entertainment1，Entertainment2的同一列中。

Image here

假设您希望TV1和TV2有两列，那么代码应该是

 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

我已经检查过了，它工作正常。