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

预先感谢您的支持!

评论
  • 淡_然
    淡_然 回复

    What about the class.my-class directive ? It applies the specified class to the element only if the condition is met :

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