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

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>

- murday1983

---

请在此处使用 proportion，而不是 username，代码如下：g-class='{red : proportion != '100', green: proportion === '100'}。如果可以，请告诉我它是否有效。 - Max Koretskyi

抱歉，复制粘贴错误，已更改为“比例”。 - murday1983

Answer 1

有两种方法可以更改字体颜色，但取决于您的需求。

1. 如果您的要求是更改内联样式，则可以使用Angular NgStyle指令，该指令会为您更新HTML元素样式。

NgStyle指令示例：

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

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

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

2. 如果您需要更改类别，则可以使用Angular的NgClass指令，该指令可以在HTML元素上添加和删除CSS类...

NgClass指令示例：

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

- mayur

Answer 2

您也可以绑定样式属性。

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

- Dmitrij Kuba

Answer 3

你可以像这样使用它：

 <div class="card template-card" [ngClass]="{'z-depth-3': template == selectedTemplate, 'not-selected': !(template == selectedTemplate) && selectedTemplate != null}">

- Jan Giacomelli

Answer 4

因为您使用的是 Angular2，所以需要使用 [ngClass]，并且您的输入模型绑定到 proportion，因此使用它进行比较，

操作如下：

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

- anoop

Answer 5

你需要修改你的逻辑，使双引号和ngModel比例值匹配

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

希望能对你有所帮助！

- Jayakrishnan