在Angular2中有条件地分配类[重复]

Posted 2023-02-22

【中文标题】在Angular2中有条件地分配类[重复]

【英文标题】：Assign classes conditionally in Angular2 [duplicate]

【发布时间】：2017-01-04 20:44:52

【问题描述】：

我正在尝试根据我从后端系统获得的值有条件地将一个类分配给一个 div。

假设有一个对象 'A' 有一个变量 status 可能有值 status1 和 status2。

我正在尝试根据使用 Angular 2 的状态有条件地分配 2 个类（class1 和 class2）。以下是我正在使用的条件。请为此提出一个可行的替代方案，

<div ng-class="status1 : 'class1', status2 : 'class2'[A.status]">
   ...
</div>

【参考方案1】：

您可以将您的对象绑定到[ngClass] 指令

<div [ngClass]="'active': isActive, 'disabled': isDisabled">

几乎和 angular 1 的语法相同。只需添加方括号

【讨论】：

成功了！谢谢@eltonkamami。作为后续问题，是否有一些地方可以阅读有关 Angular 2 的特定语法的信息？

@RamanaSarva angular.io/cheatsheet 这是官方的 Angular 2 备忘单，涵盖了很多 ng2 语法

在这种情况下，类名应该放在单括号内。我会更新答案。

【参考方案2】：

Angular 2 提供了一些添加条件类的方法，这个链接很有帮助

Angular 2 conditional class with *ngClass