我是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>