如何从下拉 angular prime ng 为元素设置其他模板

Question

I have a dropdown from PrimeNg with few elements.

.ts

this.cities = [
        {name: 'New York', code: 'NY'},
        {name: 'Rome', code: 'RM'},
        {name: 'London', code: 'LDN'},
        {name: 'Istanbul', code: 'IST'},
        {name: 'Paris', code: 'PRS'}
    ];

.html

<p-dropdown 
[options]="cities" 
[(ngModel)]="selectedCity1" 
placeholder="Select a City" 
optionLabel="name"
[showClear]="true">
<ng-template let-item pTemplate="item" >
<span style="background-color: green">{{item.name}}</span>
</ng-template>
</p-dropdown>

.scss

.green {
  background-color: green;
  }
  
.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

.pink {
  background-color: pink;
}

I managed to set the background for all the elements using ng-templates, but I can't figure out how to make different colors for each element from the drop-down list

link to the code

Answer 1

add styleClass Attribute in your array:

this.cities = [
    {name: 'New York', code: 'NY', styleClass: 'green'},
    {name: 'Rome', code: 'RM', styleClass: 'blue'},
    {name: 'London', code: 'LDN', styleClass: 'red'},
    {name: 'Istanbul', code: 'IST', styleClass: 'yellow'},
    {name: 'Paris', code: 'PRS', styleClass: 'pink'}
];

and in the HTML

<span [class]="item.styleClass">{{item.name}}</span>