п-меню не появляется

В настоящее время я тестирую Primeng с помощью angular 2 и хочу создать простое меню.

Вот мой код:

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"...

Что я делаю не так ?


angular primeng
person Vincent Caron    schedule 19.07.2016    source источник
comment
если открыть веб-инспектор, какая ошибка появляется?   -  person Sergio    schedule 20.07.2016
comment
Абсолютно никаких ошибок в веб-инспекторе не показывалось.   -  person Vincent Caron    schedule 20.07.2016

Ответы (3)


arrow_upward
0
arrow_downward

Скорее всего вам не хватает списка вниз menuitem в списке директив, сделайте так:

 directives: [Menu, MenuItem]

Согласно здесь

Ядром API является класс MenuItem, который определяет различные параметры, такие как метка, значок и дочерние элементы элемента в меню.

поэтому вам нужно добавить MenuItem в список директив.

person Pardeep Jain    schedule 27.07.2016
comment
Выдает ошибку, если вы пытаетесь добавить MenuItem в директивы. Его нигде не упоминается в документации, а также - person lohiarahul; 04.08.2016
comment
да, вы правы, только что проверил на моей машине, нет необходимости добавлять элементы меню в список директив, но, как показано в документации, у меня меню работает нормально :) - person Pardeep Jain; 04.08.2016

arrow_upward
0
arrow_downward

Я боролся с той же ситуацией, я просто не могу импортировать MenuItem из primeng/primeng, я нашел интерфейс в папке primeng/common, но пока я просто объявил следующее.

private items: any[];

Вот и все.

person uajov6    schedule 13.10.2016

arrow_upward
0
arrow_downward

так мой работает с

<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']}
            ];
    }
}
person Buckrogerz    schedule 11.01.2018