以编程方式将 CSS 类 绑定到 kendo-下拉列表？

Question

我想将 kendo-下拉列表绑定到特定的 class。本质上，我需要根据表单的某些状态（例如错误、必需等）更改控件的外观。模型中的逻辑决定将哪些 class 应用于控件。

如果模型是 'error-state' 然后添加 CSS 以在其周围放置一个框，如果需要，将边框更改为不同的状态，以及其他业务规则。

如何以编程方式将 CSS classes 绑定到 kendo-下拉列表？ 我试过了

[ngClass]="class_list_in_model"
-- and --
class="class_list_in_model"

对于我的文本框输入控件，我使用 [ngClass]="someproperty_in_model" 并且有效。

Answer 1

您可以对 <kendo-dropdownlist> 组件使用 [ngClass] 绑定：

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
    <kendo-dropdownlist [ngClass]="ddl_state" [data]="listItems">
    </kendo-dropdownlist>
  `,
  styles: [".error-state { box-shadow: 0 0 3px 3px red; }"]
})
export class AppComponent {
    public ddl_state: string = "error-state";
    public listItems: Array<string> = ["Item 1", "Item 2", "Item 3"];
}

这里有一个 plunkr demo 展示了它的实际效果。