Comment utiliser le modèle dans PrimeNG panelMenu

Question

Je dois ajouter un code HTML dans les entrées de menu afin que je tente d'utiliser pour personnaliser l'affichage:

Mon modèle:

<p-panelMenu styleClass="main-menu" class="main-menu" [model]="menus"> 
    <ng-template let-menus pTemplate> 
     {{menus.label}} <span>otherStuff</span> 
    </ng-template> 
</p-panelMenu> 

Le composant:

this.menus = [ 
     { 
      label: 'Dashboard', 
      icon: 'fa-home', 
      routerLink: '/home' 
     }, 
    ... 

Rien ne se passe et il affiche toujours le menu comme si je n'avais pas ajouté le modèle. Qu'est-ce qui me manque?

Answer 1

vous ne pouvez pas utiliser à l'intérieur de la p-panelMenu donc essayer ci-dessous comme ceci:

essayez ceci:

<p-panelMenu styleClass="main-menu" class="main-menu" [model]="menus"> 
</p-panelMenu> 

component.ts

export class AppComponent implements AfterViewInit { 
    menus: MenuItem[]; 

    constructor(
    ) { 

     this.menus = [{ 
      label: 'Dashboard', 
      icon: 'fa-home', 
      routerLink: '/home' 
     }] 
    } 

    ngAfterViewInit() { 
     let element1 = document.createElement('span') 
     let element2 = document.createTextNode('otherStuff'); 
     element1.appendChild(element2) 
     let d1 = document.getElementsByClassName('ui-menuitem-text')[0].appendChild(element1); 
    } 
}