1

我目前正在使用 angular 2 测试primeng，我想创建一个简单的菜单。

这是我的代码：

import {Component, OnInit} from '@angular/core';
import {Menu, MenuItem} from 'primeng/primeng';

@Component({
    templateUrl: 'app/salaries/menudroite.html',
    selector: 'menu-droite',
    providers: [],
   directives: [Menu]
})
export class menuDroiteComponent implements OnInit   {

  private items: MenuItem[];

  ngOnInit() {
        this.items = [{
        label: 'File',
        items: [
            {label: 'New', icon: 'fa-plus'},
            {label: 'Open', icon: 'fa-download'}
        ]
    },
    {
        label: 'Edit',
        items: [
            {label: 'Undo', icon: 'fa-refresh'},
            {label: 'Redo', icon: 'fa-repeat'}
        ]
    }];
  }

}

和html代码

<h4>Menu droite</h4>
<p-menu [model]="items"></p-menu>

当我启动网站时，什么都没有出现。如果我删除 html 中的“p-menu”行，我会看到“h4”...

我究竟做错了什么 ？

4

4 回答 4

0

即使这是旧的：它可能是“旧的忘记添加模块”。像我一样不要忘记将它添加到您的 app.module.ts @NgModule 中的导入中，如下所示：

...
...
import {MenuModule} from "primeng/menu";

        @NgModule({   
          declarations: [ ...],
          imports: [..., 
                    ..., 
                    MenuModule,
                    ...,
                    ...
    ],
    ....

对我来说，这就是问题所在。它默默地失败了，只是没有渲染任何东西。

这让我明白了：https ://www.geeksforgeeks.org/angular-primeng-menu-component/

于 2021-11-29T16:50:12.213 回答
0

很可能您menuitem在指令列表中缺少列表，如下所示：

 directives: [Menu, MenuItem]

根据此处的文档

api 的核心是 MenuItem 类，它定义了各种选项，例如菜单中项目的标签、图标和子项。

所以你必须在指令列表中添加 MenuItem 。

于 2016-07-27T18:54:22.220 回答
0

所以我的作品与

<p-menu #menu popup="popup" [model]="items"></p-menu>

然后ts文件如下只看导入和onInit

import { Component, OnInit } from '@angular/core';
import { MenuItem } from 'primeng/primeng';

import { ServiceLocatorService } from '../../commonComponents/service/serviceLocator.service';

@Component({
    selector: 'productAdmin',
    template: require('./app.component.html'),
    styles: [require('./app.component.css')]
})
export class AppComponent {

    items: MenuItem[];

    constructor(private locator: ServiceLocatorService) {
        var url: string = location.origin;
        this.locator.setUrl(url);
    }

    ngOnInit() {
        this.items = [
            { label: 'Product Definition', routerLink: ['/productSetup']},
            { label: 'Base Product Pricing', routerLink: ['/productPricing'] },
            { label: 'Base Option Pricing', routerLink: ['/optionPricing']}
            ];
    }
}
于 2018-01-11T21:15:43.027 回答
0

我一直在为同样的情况苦苦挣扎，我只是无法从 primeng/primeng 导入 MenuItem，我在 primeng/common 文件夹中找到了接口，但现在我只是声明了以下内容。

private items: any[];

而已。

于 2016-10-13T16:26:11.207 回答