Question

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

Answer 1

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

如果您的要求是更改内联样式，那么您可以使用角度NgStyle指令为您更新HTML元素样式..

NgStyle directive Ex:

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

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

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

如果您的要求是更改类，那么您可以使用angular NgClass指令在HTML元素上添加和删除CSS类...

NgClass directive Ex:

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

Answer 2

你可以像这样使用它：

<?php $myVariable = "Some text";?>
<form method="post" action="page2.php">
 <input type="hidden" name="text" value="<?php echo $myVariable; ?>">
 <button type="submit">Submit</button>
</form>

Answer 3

由于您使用Angular2，因此您需要使用[ngClass]，并且您的输入模型已绑定到proportion，因此请使用它进行比较，

这样做：

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

Answer 4

您还可以绑定样式属性。

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

Answer 5

您需要修改逻辑以使用双引号和ngModel 比例值

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

希望它有所帮助!!

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

5 个答案: