Typescript中的动态类分配

由 发布于

我正在完成我的研究生作业，在那里我必须创建一个简单的计算器。我快到了，但最后一个要点-使负结果变成红色而使绿色变成正绿色仍然不存在。结果必须在输入字段中看到

我试图在两个条件下使用[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]应该以其他方式编写？

The whole code may be also found on my stackblitz: https://stackblitz.com/edit/k-rapacz-angular-day1-z6vxu1

预先感谢您的支持！