PrimeNG MultiSelect组件：下拉显NIP-名称，芯片仅显姓名如何实现？

要实现下拉选项显示「NIP - 名称」，但选中后的芯片只展示员工姓名，只需利用PrimeNG MultiSelect的芯片自定义模板即可：

修改组件模板 #

在<p-multiSelect>内部添加chipTemplate模板，指定芯片显示内容为员工姓名：

<p-multiSelect
      [options]="employees"
      [(ngModel)]="selectedEmployees[question.id]"
      [optionValue]="'nip'"
      [optionLabel]="'label'"
      display="chip"
      [placeholder]="'Select Employees'"
      [filter]="true"
      [emptyFilterMessage]="'No options found'"
      [style]="{ width: '20vw' }"
>
  <ng-template let-item pTemplate="chip">
    {{ item.name }}
  </ng-template>
</p-multiSelect>

原理说明 #

• [optionLabel]="'label'"保持不变，确保下拉选项依然显示你定义的NIP - 名称格式；
• 通过pTemplate="chip"自定义选中项的芯片模板，直接渲染item.name字段，实现芯片仅展示员工姓名的需求；
• 员工数据处理代码无需修改，你已经在映射时保留了name字段，可供模板直接使用。

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