每个项目具有不同颜色的 Primeng 自动完成组件 - 通常它们以相同的颜色显示答案

【问题标题】：Primeng autocomplete component with different colors for each item - normally they appear in the same color每个项目具有不同颜色的 Primeng 自动完成组件 - 通常它们以相同的颜色显示
【发布时间】：2018-07-17 18:03:49
【问题描述】：

目前我想使用primeng自动完成多选组件：https://www.primefaces.org/primeng/#/autocomplete

我还需要的是，我想从中选择作为自动建议的每个项目都应该使用不同的颜色。

例如如果我有巴黎（红色）、慕尼黑（蓝色）的选项，则背景应该以不同的颜色显示。

【问题讨论】：

标签： primeng primeng-datatable primeng-dropdowns

【解决方案1】：

为每个国家/地区分配颜色后，只需使用模板来应用它：

<p-autoComplete [(ngModel)]="country" [suggestions]="filteredCountriesSingle" (completeMethod)="filterCountrySingle($event)"
  field="name" [size]="30" placeholder="Countries" [minLength]="1">

  <ng-template let-country pTemplate="item">
    <div class="ui-helper-clearfix" [ngStyle]="{'background-color':country.backgroundColor}">
      {{country.name}}
    </div>
  </ng-template>

</p-autoComplete>

检查我的Plunker，我在其中为每个国家/地区定义了随机颜色：

this.listOfCountries.forEach(function (item) {
  item.backgroundColor = "#"+((1<<24)*Math.random()|0).toString(16);
});

【讨论】：

非常感谢@Antikhippe。这是我需要的提示
被选中的项目是否也可以这样，所以被选中后保持相同的颜色
我发现我也可以在点击一个项目后给选中的项目一个颜色。在<ng-template> 中使用pTemplate="selectedItem 而不是item 解决了我的第二个问题