Question

我有这个角度代码，可以根据正确和错误的值设置文本颜色：

<td>
  <span *ngIf="user.enabled" class="badge badge-success">Enabled</span>
  <span *ngIf="!user.enabled" class="badge badge-dark">Disabled</span>
</td>

但是我想扩展代码以基于字符串值设置CSS代码。示例：

<td>
  <span *ngIf="user.status = 'Approved" class="badge badge-success">Approved</span>
  <span *ngIf="user.status = 'Declined" class="badge badge-dark"> Declined </span>
</td>

实施此检查的正确代码是什么，以及是否缺少设置默认CSS样式的代码？

Answer 1

首先：您正在ngIf中使用赋值调用，而不是比较值。

第二：Angular具有ngSwitch指令，在您的情况下可能会更好：

<td [ngSwitch]="user.status">
  <span *ngSwitchCase="'Approved'" class="badge badge-success">Approved</span>
  <span *ngSwitchCase="'Declined'" class="badge badge-dark">Declined</span>
  <span *ngSwitchDefault class="badge">Unknown</span>
</td>

比较基于测试的非值并设置CSS样式

1 个答案: