我可以在PrimeNG下拉列表的突出显示项目中添加一个图标吗?

时间:2017-07-27 16:16:31

标签: html css dropdown primeng

我正在尝试为PrimeNG下拉菜单选择项目时添加一个复选图标。我设法让它显示所有项目,但我只希望它显示所选项目。有没有办法做到这一点?谢谢!

<label for="">Status</label>
<br>
<p-dropdown [options]="status" [(ngModel)]="selectedStatus" [style]="dStyle" >
    <ng-template let-car pTemplate="item">
        <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
            <i class="fa fa-check" aria-hidden="true" style="margin-top:5px;"></i>
            <div style="font-size:14px;display: inline-block;margin-top:4px;padding-left: 20px;">{{car.label}}</div>
        </div>
    </ng-template>
</p-dropdown>

1 个答案:

答案 0 :(得分:0)

在你的图标上添加一个* ngIf并设置它以查看&#34; car&#34;等于您选择的状态

http://plnkr.co/edit/L5Us5L8UptothCP1SCKU?p=preview

<p-dropdown [options]="cars" [(ngModel)]="selectedCar" [style]="dStyle" >
    <ng-template let-car pTemplate="item">
        <div class="ui-helper-clearfix" style="position: relative;height: 25px;">
            <i *ngIf="selectedCar === car.value" class="fa fa-check" aria-hidden="true" style="margin-top:5px;"></i>
            <div style="font-size:14px;display: inline-block;margin-top:4px;padding-left: 20px;">{{car.label}}</div>
        </div>
    </ng-template>
</p-dropdown>