html - Angular2无法动态更改CSS样式

我正在使用angular2设置一些输入表单的样式，当用户无权修改它们时它们将被禁用，但是当管理员登录时，输入被启用。
为了使其更加明显，我尝试设置样式，禁用时为灰色，启用时为白色。

在html代码中：

<input type="text" class="form-control" [style.background]="cssColor" name="" [disabled]="!editionEnable" placeholder="value"
                                    [(ngModel)]="class.property" />

我也尝试了[style.backgroundColor]="cssColor"并且没有更改背景颜色。
还尝试了[ngStyle]="{'background-color': cssColor}">，并在代码中尝试如下声明cssColor：


cssColor：string =“＃F0F0F0！important”;
cssColor：string =“＃F0F0F0”;
cssColor：string =“ F0F0F0”;


我添加！important是因为在firefox中使用Web开发人员工具进行编辑时，如果！important不存在，则背景颜色不会更改。

注意：我正在使用Twitter Bootstrap

关于我做错什么的任何想法吗？使用angularjs则要简单得多。

最佳答案

请尝试执行以下操作：

<input type="text" class="form-control" [style.background]="setCssColor()" name="" [disabled]="!editionEnable" placeholder="value"
                                    [(ngModel)]="class.property" />

在您的组件中，如下所示：

setCssColor() {
    if(this.editionEnable) {
      return "#F0F0F0 !important";
    } else {
      return "#00ff"; //whatever color
    }
  }

希望这可以帮助。