Prime NG-带有图标的下拉菜单

Question

如果图标上的选项包含图标名称和项目名称，是否可以在下拉菜单中的每个项目上放置图标？

Prime NG的这段代码对我不起作用：

<p-dropdown [options]="cars" [(ngModel)]="selectedCar2" [style]="{'width':'150px'}" filter="true">
    <ng-template let-item pTemplate="selectedItem">
        <img src="assets/showcase/images/demo/car/{{item.label}}.png" style="width:16px;vertical-align:middle" />
        <span style="vertical-align:middle; margin-left: .5em">{{item.label}}</span>
    </ng-template>
    <ng-template let-car pTemplate="item">
        <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
            <img src="assets/showcase/images/demo/car/{{car.label}}.png" style="width:24px;position:absolute;top:1px;left:5px"/>
            <div style="font-size:14px;float:right;margin-top:4px">{{car.label}}</div>
        </div>
    </ng-template>
</p-dropdown>

我的下拉选项：

{  
   "id":17,     
   "configurationItem":{  
       "id":18,
       "icon":"ui-icon-view-list",
       "name":"View-List",         
    },     
}

我要在

中显示“ icon”的名称和值

<span class="configurationItem.icon">

Answer 1

是的，您可以只显示项目的图标或项目图标和值。

首先请确保您使用的是primeNG v5或更高版本。

<p-dropdown [options]="listItems" [(ngModel)]="selectedItem" >
<ng-template let-item pTemplate="selectedItem">
     <i class="{{item.label}}"></i>
</ng-template>
<ng-template let-object pTemplate="item">
     <i class="{{object.label}}"></i>
</ng-template>

listItems: SelectItem[];
this.listItems = [{label: 'fa fa-user', value: 'v1'}, {label: 'fa fa-user-cog', value: 'v2'}];

确保您将primeNg.SelectItem用于项目列表。