Primeng 自动完成组件,每个项目都有不同的颜色——通常它们以相同的颜色出现
Primeng autocomplete component with different colors for each item - normally they appear in the same color
目前我想使用 primeng 自动完成多 select 组件:https://www.primefaces.org/primeng/#/autocomplete
我还需要的是,我想 select 作为自我暗示的每个项目都应该有不同的颜色。
例如如果我有巴黎(红色)、慕尼黑(蓝色)选项,背景应该以不同的颜色显示。
为每个国家指定颜色后,只需使用模板来应用它即可:
<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);
});
目前我想使用 primeng 自动完成多 select 组件:https://www.primefaces.org/primeng/#/autocomplete
我还需要的是,我想 select 作为自我暗示的每个项目都应该有不同的颜色。
例如如果我有巴黎(红色)、慕尼黑(蓝色)选项,背景应该以不同的颜色显示。
为每个国家指定颜色后,只需使用模板来应用它即可:
<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);
});