如何在 Primeng 中更改芯片颜色？答案

【问题标题】：how can I change chips color in Primeng?如何在 Primeng 中更改芯片颜色？
【发布时间】：2023-03-13 23:19:02
【问题描述】：

我想在primeng中更改色卡，每次选择一个都会得到不同的颜色！谁可以帮我怎么做！

我的代码：

 <p-multiSelect [options]="cars" [(ngModel)]="selectedCars1"  [selectionLimit]=3 [panelStyle]="{minWidth:'12em'}"
                         [maxSelectedLabels]=2></p-multiSelect>
          <p>Selected Cars: </p>
          <p-chips [(ngModel)]="selectedCars1" ></p-chips>

【问题讨论】：

给我们看一些代码和锻炼！
@AbdulrahmanHatem 完成！

标签： html css angular primeng chips

【解决方案1】：

要为您的 PrimeNG 芯片添加不同的背景，您可以执行以下操作，

在您的 component.html 文件中，

<p-chips [(ngModel)]="selectedCars" (onAdd)="onChipAdd($event)"></p-chips>

在您的 component.ts 文件中，

为onAdd 事件创建一个事件处理程序，以及一个使用CSS 选择器li.p-chips-token 选择文档中所有元素的函数。此功能本质上有助于访问所有 PrimeNG 芯片。

由于要求规定每个 PrimeNG 芯片的背景应该不同，我们还需要创建一个函数来生成随机颜色。

onChipAdd(event) {
  console.log(event);
  setTimeout(() => {
    this.modifyBackground(), 0
  });

}

generateBackground() {
  let letters = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

modifyBackground() {
  let colorOfInterest = this.generateBackground();
  let chipsOfInterest =
    document.querySelectorAll<HTMLElement>('li.p-chips-token');
  console.log(chipsOfInterest);
  if (chipsOfInterest.length > 0) {
    let chipOfInterest = chipsOfInterest[chipsOfInterest.length - 1];
    chipOfInterest.style.backgroundColor = colorOfInterest;
  }
}

TLDR；

供您参考，请找到工作演示的链接here

编辑：

如果您的要求是仅更改 PrimeNG 芯片的默认背景颜色，请执行以下操作。

在您的 styles.css 文件中，

.p-chips ul.p-chips-multiple-container .p-chips-token {
  color: #000; 
  background: #dfdfdf !important; /* Add the required background color */
}

【讨论】：

它对我不起作用：/
我已经更新了我的答案。请检查。
蓝色还是没有变化
请参考以下working demo
我也不知道为什么它不起作用！我正在使用 angular 8 + primeng 8

【解决方案2】：

也许我来晚了，但我通过以下方式实现并添加了 Border-Radius

<p-chip [ngStyle]="{'background': '#EF5350','border-radius': '15px' }"></p-chip>

【讨论】：