Kendo UI Angular中DropdownList下拉选项条件化背景高亮实现咨询

以下是可直接落地的实现方法，完全基于Kendo官方提供的模板扩展能力，无侵入性兼容组件原有功能：

实现步骤 #

• 1. 自定义下拉选项模板，绑定高亮判断逻辑
     Kendo DropdownList 提供kendoDropDownListItemTemplate用于自定义每个下拉选项的渲染内容，你可以在模板内嵌入任意业务条件判断来绑定高亮样式：

<kendo-dropdownlist 
  [data]="yourOptionList" 
  [textField]="'text'" 
  [valueField]="'id'"
>
  <!-- 自定义下拉选项模板 -->
  <ng-template kendoDropDownListItemTemplate let-item>
    <span [ngClass]="{
      'highlight-item': item.needHighlight === true /* 替换为你自己的业务判断条件 */
    }">
      {{ item.text }}
    </span>
  </ng-template>

  <!-- 可选：如果需要选中后输入框内的内容也同步高亮，添加值模板 -->
  <ng-template kendoDropDownListValueTemplate let-selectedItem>
    <span [ngClass]="{
      'highlight-item': selectedItem?.needHighlight === true
    }">
      {{ selectedItem?.text }}
    </span>
  </ng-template>
</kendo-dropdownlist>

• 2. 新增高亮自定义样式
     你可以根据需求自定义文本色、背景色、字体样式等，样式可以写入全局样式文件styles.css，或者在组件样式中添加::ng-deep前缀生效：

/* 写在全局styles.css的示例 */
.k-list .k-item .highlight-item {
  color: #ffffff !important;
  background-color: #165DFF !important;
  font-weight: 700;
  padding: 2px 4px;
  border-radius: 2px;
}

• 效果示例参考：
  

内容的提问来源于stack exchange，提问作者Supriyo Bhattacherjee