PrimeNG 多选中 SelectItem 的 styleClass 属性答案

【问题标题】：styleClass property of SelectItem in PrimeNG multiselectPrimeNG 多选中 SelectItem 的 styleClass 属性
【发布时间】：2018-06-05 06:32:09
【问题描述】：

谁能解释我如何使用PrimeNG的SelectItem接口的styleClass？

我正在使用 PrimeNG 多选，我认为每个 SelectItem 的 styleClass 用于在该特定元素上应用一个类。但不知何故无法这样做。

下面的代码sn-p：

HTML

<p-multiSelect [options]="cities1" [(ngModel)]="selectedCities1" optionLabel="label"></p-multiSelect>

sample.ts

    cities1: SelectItem[];
this.cities1 = [
        {label:'New York', value: 'New York', styleClass: 'testClass'},
        {label:'Rome', value: 'Rome'},
    ];

现在我希望下拉列表的第一个元素具有类 testClass。但这并没有发生。

【问题讨论】：

标签： css primeng multi-select

【解决方案1】：

我会为此使用模板功能。

<p-multiSelect [options]="cities1" [(ngModel)]="selectedCities1" optionLabel="label">
    <ng-template let-city pTemplate="item">
        <span [ngClass]="city.value.styleClass">{{city.label}}</span>
    </ng-template>
</p-multiSelect>

见StackBlitz

【讨论】：