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 作为您的项目列表。

Prime NG - 带图标的下拉菜单

Prime NG - Dropdown With Icons

primeng

angular