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

【问题标题】：Prime NG - Dropdown With IconsPrime NG - 带有图标的下拉菜单
【发布时间】：2019-07-19 12:36:00
【问题描述】：

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

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",         
    },     
}

我想在

中显示“图标”的名称和值

&lt;span class="configurationItem.icon"&gt;

【问题讨论】：

标签： angular primeng

【解决方案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 作为您的项目列表。

【讨论】：