p-menu not showing up | 易学教程

问题

I'm currently testing primeng with angular 2 and I want to create a simple menu.

Here my code :

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

}

and the html code

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

When I launch the website nothing shows up. If I remove the "p-menu" line in the html, I see the "h4" ...

What am I doing wrong ?

回答1:

Most probably you are missing list down menuitem in the list of directives, make it like this:

 directives: [Menu, MenuItem]

According to documentation here

Core of the api is MenuItem class that defines various options such as the label, icon and children of an item in a menu.

so you have to add MenuItem in the list of directives.

回答2:

I have been struggling with the same situation , I just can´t import MenuItem from primeng/primeng , I found the interface in the primeng/common folder, but for now I just declared the following.

private items: any[];

That´s it.

回答3:

so mine works with

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

and then the ts file is as follows just look at the imports and the 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']}
            ];
    }
}

来源：https://stackoverflow.com/questions/38452536/p-menu-not-showing-up

标签

angular

primeng