如何修改Primeng中p-chips组件颜色，实现选中项不同颜色展示

推荐用p-chips自带的自定义插槽实现，无需样式穿透，兼容性和可维护性更强，步骤如下：

• 第一步：改造选项数组，给每个汽车选项配置对应颜色
  你可以直接在cars数组的每个选项里新增color字段，示例：

// 组件ts文件内的cars定义
cars = [
  {label: '宝马', value: 'bmw', color: '#2563eb'},
  {label: '奔驰', value: 'benz', color: '#16a34a'},
  {label: '奥迪', value: 'audi', color: '#ea580c'},
  // 其余选项按需求自定义颜色即可
];

如果你不想修改原始数组，也可以单独写一个颜色映射函数，根据选项值返回对应颜色。

• 第二步：修改模板代码，用p-chips的chip插槽自定义每个chip的渲染效果
  修改后的模板代码如下：

<p-multiSelect [options]="cars" [(ngModel)]="selectedCars1"  [selectionLimit]=3 [panelStyle]="{minWidth:'12em'}" [maxSelectedLabels]=2></p-multiSelect>
<p>Selected Cars: </p>
<p-chips [(ngModel)]="selectedCars1">
  <!-- 自定义单个chip的渲染模板 -->
  <ng-template pTemplate="chip" let-car>
    <p-chip 
      [label]="car.label" 
      [removable]="true"
      [style]="{'background-color': car.color, 'color': '#fff'}"
      (onRemove)="removeChip(car)"
    ></p-chip>
  </ng-template>
</p-chips>

• 第三步：补充移除逻辑，在组件ts文件里添加chip移除方法

removeChip(targetCar: any) {
  this.selectedCars1 = this.selectedCars1.filter(car => car.value !== targetCar.value);
}

如果你的p-multiSelect配置了optionValue="value"，selectedCars1里存的是选项值而非完整对象，只需要根据值查对应的颜色映射即可，核心逻辑不变。

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