p-menuが表示されない

Question

私は現在角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"が表示されます...

私は間違っていますか？

Answer 1

おそらくあなたは、このようにそれを作る、ダウンmenuitemディレクティブのリストに一覧表示されません：

directives: [Menu, MenuItem] 

よる

documentation hereへのAPIのコアは、様々なオプションを定義するMenuItemクラスでありますメニュー内の項目のラベル、アイコン、および子など）を選択します。

ディレクティブのリストにMenuItemを追加する必要があります。

Answer 2

私は同じ状況で苦労しています、私はprimeng/primengからMenuItemをインポートできません。私はprimeng/commonフォルダのインタフェースを見つけましたが、今のところ私は次のように宣言しました。

private items: any[]; 

それです。

Answer 3

ので鉱山は

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

と連携し、あなたはどのようなエラーが表示されますwebinspectorを開いた場合だけ輸入との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']} 
      ]; 
    } 
}