Typescript 中的动态类分配答案

【问题标题】：Dynamic class assignment in TypescriptTypescript 中的动态类分配
【发布时间】：2020-09-03 21:57:01
【问题描述】：

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

我试图在两个条件下使用 [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 只是 2 个简单的类 `.red {color: red} 和 .green {color: green}。

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

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

提前感谢您的支持！

【问题讨论】：

我不做 Angular，但'red': <=0 看起来很可疑。它应该如何知道应该针对0 测试什么？ 'green': !<=0 看起来更可疑，你可以考虑>。最后，这两个条件都试图应用于 0。其中一个（可能是红色）不应包含 0（例如，<0 代表红色，>=0 代表绿色）。
我知道，对吧？我试图用 {{ result }}

标签： javascript angular typescript class dynamic

【解决方案1】：

如果您查看angular documentation，有多种方法可以有条件地添加一个类：

你可以这样做：

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

或

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

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

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

working example

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

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

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

您可以阅读更多关于申请课程的信息here。

【讨论】：