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

Question

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

我还需要的是，我想从自选过程中选择的每个项目都应该有不同的颜色。

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

Answer 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);
});