Angular2 – 根据值为元素设置不同的颜色

发布时间：2020-12-17 08:33:50 所属栏目：安全来源：网络整理

导读：我是Angular2的新手,我想知道如何根据值设置字体颜色. 我的情况是：如果输入字段的值不是100,那么我想要它是红色但如果它是100那么我想要它为绿色. 我有以下代码,但无法使其工作. XXX.component.css .red { color: red; }.green { color: green;} XXX.compon

我是Angular2的新手,我想知道如何根据值设置字体颜色.

我的情况是：如果输入字段的值不是100,那么我想要它是红色但如果它是100那么我想要它为绿色.

我有以下代码,但无法使其工作.

XXX.component.css

.red {
    color: red; 
}

.green {
    color: green;
}

XXX.component.css

<input mdInput placeholder="Proportion '%'" [(ngModel)]="proportion ">
<p>hello <span ng-class='{red : proportion!= '100',green: proportion === '100'}'>{{proportion}}</span></p>

有两种解决方案可以更改字体颜色,但取决于您的要求

>如果您要求更改内联样式,则可以使用角度NgStyle指令为您更新HTML元素样式.

NgStyle指令Ex：

<span [ngStyle]="{'color': proportion === '100' ? 'green' : 'red'}"></span>

        ---------------------- OR -----------------------------------

<span [style.color]="proportion === '100' ? 'green' : 'red'"></span>

>如果您的要求是更改类,则可以使用角度NgClass指令,该指令在HTML元素上添加和删除CSS类…

NgClass指令Ex：

<span [ngClass]="{proportion === '100' ? 'green': 'red'}"></span>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!