Angular2无法动态更改css样式

我正在使用angular2来设计一些输入表单，当用户没有修改权限时它们将被禁用，但是当管理员登录时，输入被启用。为了让它更加明显，我尝试对它们进行设计，禁用时为灰色，启用时为白色。Angular2无法动态更改css样式

在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： “＃F0F0F0重要的” 串=;
cssColor：string =“＃F0F0F0”;
cssColor：string =“F0F0F0”;

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

注：我使用Twitter的引导

上什么，我dooing不对任何想法？用angularjs做这件事更简单。

来源

2017-02-27 B.J. A.A.

我认为cssColor是在你的组件类中设置的。给它一个默认值。然后根据editionEnable切换它。 –

请尝试做这样的事情：

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

希望这有助于。

来源

2017-02-28 00:17:11 Usman

不，它没有帮助，我也加入到css文件中，但没有任何变化 –

这是一个工作的plunk，它会做你以后的事 - 不知道为什么它没有为你工作https://plnkr.co/edit/ uBNF65？p = preview – Usman

我使用引导程序，不知道引导程序是否优先于我的css –

试试这个：

组件内部：

public cssColor:string="#F0F0F0";

的component.html

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

而且这可能是值得一提，停止应用程序里面，运行npm cache clear然后重新运行应用程序。

无论哪种方式上面的例子是我的工作结束。

来源

2017-02-28 03:10:42

我已经在野蛮服务器上运行，但颜色不变 –

事实证明，我们在自定义CSS文件中有这样一行：.input { background:#0f0f0f !important;} 我刚刚删除的!important，一切工作正常。

来源

2017-03-01 23:49:23

Angular2无法动态更改css样式

回答

相关问题