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。

您可以在此處閱讀有關申請課程的更多信息。