PrimeNG V13中p-splitButton内嵌p-menu无法显示问题求助

你的代码核心问题是用错了PrimeNG splitButton的组件用法——splitButton不需要嵌套p-menu，而是通过[model]属性直接绑定菜单数据。

修正后的模板代码 #

<p-splitButton
  appendTo="body"
  label="{{menuItems[0].label}}"
  icon="{{menuItems[0].icon}}"
  styleClass="p-button-sm"
  class="split-Button"
  [model]="menuItems"
></p-splitButton>

修正后的TS数据处理 #

import { MenuItem } from 'primeng/api';

menuItems: MenuItem[] = [
  { 
    id: "display", 
    label: 'Afficher', 
    icon: 'fa fa-eye', 
    styleClass: 'text-primary',
    command: (ev) => { this.display.emit(ev); } 
  },
  { 
    id: "edit", 
    label: 'Modifier', 
    icon: 'cil-pen', 
    styleClass: 'text-success',
    command: (ev) => { this.edit.emit(ev); } 
  },
  { 
    id: "delete", 
    label: 'Delete', 
    icon: 'pi pi-times', 
    styleClass: 'text-danger',
    command: (ev) => { this.delete.emit(ev); } 
  },
];

关键注意点 #

1. PrimeNG V13的splitButton组件设计就是通过[model]绑定MenuItem数组来生成下拉菜单，嵌套p-menu的写法完全不符合官方规范，所以菜单不会渲染。
2. 文本颜色样式改用styleClass属性设置，这是MenuItem接口自带的属性，比模板里用ngClass更符合组件设计逻辑。
3. 必须导入MenuItem接口，保证数据结构和组件期望的一致，避免隐性错误。

内容的提问来源于stack exchange，提问作者said sendaTrack