以編程方式將CSS類綁定到kendo-dropdownlist？

Question

我想將kendo-dropdownlist綁定到特定的類。基本上我需要根據表單的某些狀態（例如錯誤，必需等）更改控件的外觀。模型中的邏輯確定將哪些類應用於控件。

如果模型是'錯誤狀態'，那麼添加CSS以在其周圍放置一個框，如果需要，將邊框更改爲不同的狀態以及其他業務規則。

如何以編程方式將CSS類綁定到kendo-dropdownlist？ 我試圖

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

對於我的文本框中輸入控件我使用[ngClass] =「someproperty_in_model」和工程。

Answer 1

您可以使用[ngClass]爲<kendo-dropdownlist>組件綁定：

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，顯示這個動作。