Javascript Typescript中的动态类赋值

我正在做我的研究生作业，我必须创建一个简单的计算器。我就快到了，但是最后一个元素——使负结果变成红色和正结果变成绿色仍然不见了。结果必须显示在输入字段中

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

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

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上找到：

提前感谢您的支持

class.my-class指令呢？仅当满足以下条件时，才会将指定的类应用于元素：

如果查看，有多种方法可以有条件地添加类：

在您的情况下，您可以：

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

或

如果希望0也有颜色，也可以执行以下操作：

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

---

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

在html最后一次输入中，您可以添加一个ngClass并添加基于三元运算符的样式

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

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

---

您可以阅读有关应用类的更多信息

我不做棱角的，但“红色”：我知道，对吧？我正试图与{{result}交换它

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

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