如何在PrimeNG p-panel头部添加自定义条件图标？

问题背景 #

需要在PrimeNG的p-panel组件头部添加一个额外图标（区别于默认的展开/关闭图标），图标的显示状态由getDetailGrade(tool.id)接口返回的结果决定。现有实现仅能在独立的ng-template中显示图标，无法直接渲染到面板头部。

现有代码问题分析 #

1. 全局变量dataGrid会导致多个p-panel状态冲突，无法独立控制每个面板的图标显示
2. 错误使用[pSelectableRow]指令（该指令用于PrimeNG表格行选择，不适用于p-panel）
3. 未利用p-panel的header模板特性，无法将图标嵌入头部区域

解决方案 #

1. 修正TS逻辑（维护独立的面板状态）

将全局变量改为映射表，确保每个tool的状态独立：

gradeMap: { [key: string]: any } = {};
hideTooltipMap: { [key: string]: boolean } = {};
infoGradeMap: { [key: string]: string } = {};

getDetailGrade(toolId: string) {
    this.gradeService.getGradeBookById(toolId).then(resCatalog => {
        this.gradeMap[toolId] = resCatalog;
        this.hideTooltipMap[toolId] = false;
        this.infoGradeMap[toolId] = "Something";
    });
}

2. 调整SCSS适配面板头部

缩小图标尺寸并改为行内块级显示，适配面板头部布局：

.icon_grade {
    display: inline-block;
    text-indent: -9999px;
    width: 24px;
    height: 24px;
    background: url('../../../assets/icon/designer/book.svg');
    background-size: contain;
    margin-left: 8px;
}

3. 重构HTML（使用p-panel的header模板）

通过pTemplate="header"自定义面板头部，直接嵌入条件显示的图标：

<p-panel [toggleable]="true"
         (click)="onClickElement(tool.properties, i, tool)"
         [pTooltip]="infoGradeMap[tool.id]" 
         [tooltipDisabled]="hideTooltipMap[tool.id] ?? true">
    <!-- 自定义p-panel头部内容 -->
    <ng-template pTemplate="header">
        <span>{{tool.id}}</span>
        <!-- 根据当前tool的grade数据判断是否显示图标 -->
        <i *ngIf="gradeMap[tool.id]" class="icon_grade"></i>
    </ng-template>

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p-panel>

关键说明 #

• 使用gradeMap存储每个tool的接口返回数据，避免全局状态冲突
• 利用PrimeNG组件的pTemplate="header"特性，将自定义内容（标题+图标）直接渲染到面板头部
• 通过*ngIf="gradeMap[tool.id]"实现图标的条件显示，当getDetailGrade接口返回数据后，对应面板的图标自动显示

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