时间戳

首页 > 解决方案 > 如何在动态加载值（PrimeNG）时在下拉列表中设置特定选项的样式？

html - 如何在动态加载值（PrimeNG）时在下拉列表中设置特定选项的样式？

问题描述

就像标题说的那样，我需要style: color: red;从下拉列表中设置一些选项，但我不知道如何。这是我的代码（我正在使用 PrimeNG）：

我的 HTML：

<div class="modal-body">
 <form [formGroup]="reasonForm" #reasonModal="ngForm" (ngSubmit)="onReject()">
   <div formArrayName="items">
     <div *ngFor="let item of Items.controls; let i=index" [formGroupName]="i">
      <div class="rejectionreasons row">
       <div class="col">
        <p>{{'Select fields for rejection' | translate}}:</p>
        <p-multiSelect [maxSelectedLabels]="5" [options]="dataListReject"
          defaultLabel="{{'Select' | translate}}..." [style]="{'width':'100%'}"
          formControlName="datatoreject">
        </p-multiSelect>
       </div>
       <div class="col">
        <p>{{'Select rejection reason' | translate}}:</p>
        <p-dropdown [options]="rejectionReasons" formControlName="rejectionreason">
        </p-dropdown>
       </div>
       <div class="col-md-1">
        <button type="button" class="button addrejection" (click)="deleteItem(i)">
         <i class="fa fa-times"></i>
        </button>
       </div>
      </div>
     </div>
    </div>
    ....

这是我希望它看起来如何的图片： 下拉列表 以及生成的 HTML（源页面）：

<p-multiselectitem class="ng-tns-c4-6 ng-star-inserted" style="">
 <li class="ui-multiselect-item ui-corner-all" aria-label="First Name" 
  tabindex="0" style="display: block;">
  <div class="ui-chkbox ui-widget">
   <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default">
    <span class="ui-chkbox-icon ui-clickable"></span>
   </div>
  </div>
  <!---->
  <span class="ng-star-inserted">First Name</span>
  <!---->
 </li>
</p-multiselectitem>
<p-multiselectitem class="ng-tns-c4-6 ng-star-inserted" style="">
 <li class="ui-multiselect-item ui-corner-all" aria-label="Surname" 
  tabindex="0" style="display: block;">
  <div class="ui-chkbox ui-widget">
   <div class="ui-chkbox-box ui-widget ui-corner-all ui-state-default">
    <span class="ui-chkbox-icon ui-clickable"></span>
   </div>
  </div>
  <!---->
  <span class="ng-star-inserted">Surname</span>
  <!---->
 </li>
</p-multiselectitem>
<p-multiselectitem class="ng-tns-c4-6 ng-star-inserted" style="">
 ....
</p-multiselectitem>

我认为这里的棘手部分是列表是动态加载的，并且我并不总是具有相同的值，并且我想在特定值出现在此下拉列表中时为其设置样式。有任何想法吗？

标签： htmlcssangularprimeng

解决方案

推荐阅读