Kendo MultiSelect行内样式自定义：按数组文本字段设置元素样式

默认情况下，Kendo MultiSelect会把textField绑定的内容当成纯文本转义输出，所以你数据里带的<span style='color:red'>这类HTML代码只会显示成字符串，不会解析成带颜色的样式。要解决这个问题，得用自定义模板来手动渲染HTML：

修改后的代码示例 #

TS代码（数据无需改动）

dataValues: Array<{value: number, text: string}> = [
  {value: 1, text: "<span style='color:red'>value 1</span>"},
  {value: 2, text: "value 2"}, 
  {value: 3, text: "<span style='color:red'>value 3</span>"}
];

HTML代码（添加自定义模板）

<kendo-multiselect 
      [checkboxes]="true" 
      [autoClose]="false"
      [data]="dataValues"
      [valueField]="'value'"
      [valuePrimitive]="true">
  <!-- 自定义下拉选项模板，解析HTML内容 -->
  <ng-template kendoMultiSelectItemTemplate let-dataItem>
    <span [innerHTML]="dataItem.text"></span>
  </ng-template>

  <!-- 可选：如果希望选中后的标签也保留样式，添加此模板 -->
  <ng-template kendoMultiSelectTagTemplate let-dataItem>
    <span [innerHTML]="dataItem.text"></span>
  </ng-template>
</kendo-multiselect>

关键点说明 #

• Angular的[innerHTML]指令会把绑定的HTML字符串解析为真实DOM元素，行内样式因此可以正常生效。
• 仅需要下拉选项显示样式时，只保留kendoMultiSelectItemTemplate即可；若选中的标签也需要带颜色样式，再加上kendoMultiSelectTagTemplate。
• 注意：使用innerHTML时要确保HTML内容安全可信，避免引入不可信内容导致XSS攻击风险。

内容的提问来源于stack exchange，提问作者Muhammad Sohail