Question

我使用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 =＆＃34;＃F0F0F0！important＆＃34;;
cssColor：字符串=＆＃34;＃F0F0F0＆＃34 ;;
cssColor：字符串=＆＃34; F0F0F0＆＃34 ;;

我添加了！important，因为使用firefox中的web开发人员工具进行编辑，如果！important不在那里，背景颜色不会改变。

注意：我正在使用Twitter bootstrap

关于我做错了什么的任何想法？使用angularjs要做到这一点要简单得多。

Answer 1

请尝试做这样的事情：

<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
    }
  }

希望这有帮助。

Answer 2

试试这个：

组件内部：

public cssColor:string="#F0F0F0";

在component.html内部

<input type="text" class="form-control"  [ngStyle]="{'background-color':  cssColor}"  placeholder="value" />

另外值得一提的是，停止应用程序，运行npm cache clear然后重新运行应用程序。

无论哪种方式，上面的例子都是我的结局。

Answer 3

结果证明我们在自定义css文件中有这一行：.input { background:#0f0f0f !important;} 我刚刚删除了!important，一切都按预期工作。

Angular2无法动态更改css样式

3 个答案: