我可以在PrimeNG下拉菜單中爲突出顯示的項目添加一個圖標嗎？

我想添加一個檢查圖標，以便爲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>

來源

2017-07-27 Andrea G

自己的圖標，添加一個* ngIf並將其設置爲看「汽車」等於你selectedStatus

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>

來源

2017-07-27 17:46:44 BillF

出於某種原因，現在當我嘗試時，下拉菜單停止工作。 –

你可以從plnkr看到它清楚地起作用。您可能必須根據您的component.ts中的個人代碼修改變量。 – BillF

謝謝！我會嘗試的。 –

我可以在PrimeNG下拉菜單中爲突出顯示的項目添加一個圖標嗎？

回答

相關問題