多选择元素颜色变化

Question

我希望根据我在数组文本字段中给出的内联样式，对kendo中的元素应用样式。

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"
      [textField]="'text'"
      [valueField]="'value'"
      [valuePrimitive]="true">
</kendo-multiselect> 

输出

​

​

输出应该是这样的。

​

​

Answer 1

您可以使用模板来格式化这些值。你有两个选择

1. 注入domSanitizer并在模板中使用innerHTML 构造函数{} public listItems: Array= {value:1，text:SafeStyle>= 'Value 1‘}，{value:2，text:this.domSanitizer.bypassSecurityTrustHtml( 'Value 2’}，
2. 使用新属性，例如颜色，并使用一些类似的 公共listItems: Array<{ text: string，value: number，color?:any}> ={ text：‘text’，value: 1，color:'red'}，{ text：'Medium'，value: 2 }，{ text：‘大’，值: 3，颜色：‘绿色’}；