Typescript 中的动态 class 赋值

Question

我正在做我的研究生作业，我必须创建一个简单的计算器。 我快到了，但最后一个元素 - 仍然缺少使负结果红色和正绿色的结果。 结果必须在输入字段中看到

我试图在两个条件下使用 [ngClass]= 但它不起作用：

<input type="number" [ngStyle]="resultStyling" value="{{ result }}" name="resultInput" 
[ngClass]="{
  'red': <=0,
  'green': !<=0
  }">

计算器的 component.ts 中的公共类是：

public field1: number;
  public field2: number;
  public result: number;
  public isPositive: boolean = true;

HTML：

<input type="number" [ngStyle]="inputStyling" name="field1" [(ngModel)]="field1"><br>
<button (click)="add()" [ngStyle]="buttonStyling">+</button>
<button (click)="substract()" [ngStyle]="buttonStyling">-</button>
<button (click)="multiply()" [ngStyle]="buttonStyling" >*</button>
<button (click)="divide()" [ngStyle]="buttonStyling">/</button><br><input type="number" [ngStyle]="inputStyling" name="field2" [(ngModel)]="field2">
<br>=<br>
<input type="number" [ngStyle]="resultStyling" value="{{ result }}" name="resultInput">

而 CSS 只是两个简单的类`.red {color: red} 和.green {color: green}。

我不知道如何使结果显示为彩色。 您有什么建议可以解决吗？ 也许 [ngClass] 应该以不同的方式编写？

整个代码也可以在我的 stackblitz 上找到： https://stackblitz.com/edit/k-rapacz-angular-day1-z6vxu1

预先感谢您的支持！

Answer 1

如果您查看angular 文档，有多种方法可以有条件地添加 class：

在你的情况下你可以这样做：

<input [ngClass]="{'red': result < 0, 'green': result > 0}">

要么

<input [class.red]="result < 0" [class.green]="result > 0">

如果你想让 0 也有颜色，你也可以这样做：

[ngClass]="result < 0 ? 'red' : 'green'"

工作示例

Answer 2

class.my-class指令怎么样？ 仅当满足条件时，它才将指定的 class 应用于元素：

<input type="number" [ngStyle]="resultStyling" value="{{ result }}" name="resultInput" 
[class.red]="result <= 0" [class.green]="result > 0">

Answer 3

Styles 可以使用三元运算符按以下方式应用。

在你 html 最后输入，你可以添加一个 ngClass 并添加基于三元运算符的 styles 。

<input type="number" [ngStyle]="resultStyling" [ngClass]="result>0 ? 'green' : 'red'" value="{{ result }}" name="resultInput">
<br>

在上面的代码中，我们正在检查结果是否大于 0，如果是，则应用绿色 class，否则应用红色 class。

您可以在此处阅读有关申请课程的更多信息。