如何在PrimeNG手风琴标题后添加带动态颜色的圆形数字图标

要在<p-accordionTab>的标题后添加带动态数字的圆形图标，并且数字颜色随条件变化，你需要自定义标题模板，具体实现步骤如下：

• 替换静态header为自定义模板：PrimeNG的AccordionTab支持通过<ng-template pTemplate="header">自定义标题内容，以此灵活添加图标和动态元素。
• 添加圆形图标与数字：使用PrimeNG的pi pi-circle图标类，在图标内部放置动态绑定的数字（示例中绑定剩余数量number2，可根据需求替换）。
• 动态设置数字颜色：通过Angular属性绑定[style.color]，根据业务条件（比如数字是否大于0、完成率区间等）设置颜色。
• 调整样式对齐：用内联布局类或原生CSS让标题文本和图标垂直居中，避免排版错乱。

修改后的完整代码：

<p-accordion class="p-2 d-flex row border m-4">
  <p-accordionTab>
    <!-- 自定义标题模板 -->
    <ng-template pTemplate="header">
      <span style="display: inline-flex; align-items: center;">
        Product Testing
        <!-- 带动态数字的圆形图标 -->
        <span class="pi pi-circle" style="margin-left: 8px;" [style.color]="number2 > 0 ? '#dc3545' : '#28a745'">
          {{ number2 }}
        </span>
      </span>
    </ng-template>

    <div class="d-flex justify-content-between">
      <p>Completed : <p-badge value="{{number1}}" severity="success"></p-badge></p>
      <p>Remaining : <p-badge value="{{number2}}" severity="danger"></p-badge></p>
      <em class="pi pi-trash" (click)="deleteCard($event)"></em>
    </div>
  </p-accordionTab>
</p-accordion>

关键说明： #

• 用<ng-template pTemplate="header">替代了原有的header属性，实现标题内容的完全自定义。
• [style.color]="number2 > 0 ? '#dc3545' : '#28a745'"是动态颜色的核心逻辑，你可以根据实际业务需求调整判断条件（比如判断数字是否超过阈值、关联完成状态等）。
• 示例中用原生CSS实现了文本与图标的对齐和间距，如果你项目使用Bootstrap，也可以替换为d-inline-flex align-items-center ms-2这类工具类。
• 图标内的数字绑定了number2，可根据需求换成总数、未完成数等其他业务变量。

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