如何根据angular 2中的bool条件将类添加到现有类中

如何根据typeScript布尔条件将“活动”类放置在元素中

我的用例：

而不仅仅是像这样的

class=“可折叠标题”

<div class="collapsible-header " >
My Title
</div>                                          

我的头衔

我希望这样写：

<div class="collapsible-header active" >
My Title
</div>                                          

我的头衔

正如您所看到的，其中还有“active”类。 但这应该只出现在myBool为真的情况下

我们如何做到这一点？

您也可以使用：

[class.active]="someCondition"

类绑定语法类似于属性绑定。而不是一个元素 属性，可以选择从前缀类开始 后跟一个点（.）和CSS类的名称：[class.class name]

有关官方文件的更多信息：

原始问题所有解决方案的摘要：

解决方案1）

。。。

解决方案2）

。。。

解决方案3）

。。。

解决方案4）

。。
..

---

我认为对于我的用例来说，解决方案2是最简单的

试试

class=“可折叠头”[ngClass]=“活动的：myBool}”

。很好！我要了一个解决方案你们给了我两个那个石头！答对 了我刚刚完成了我自己的解决方案，但你的解决方案太离谱了。非常感谢。我的实现是

。

和

。

这是解决方案的另一种替代方案吗<代码>。。。当一个问题有多种解决方案时，我会尝试遵循这些指导原则，但我想你的也行。

<div class="collapsible-header" [class.ACTIVE]="myBool">...</div>

<div class="collapsible-header {{ myBool ? 'ACTIVE' : ''}}">...</div>

<div class="collapsible-header" [ngClass]="{'ACTIVE': myBool}">...</div>           

<div *ngIf="myBool"    class="collapsible-header" >..</div> 
<div *ngIf=" ! myBool" class="collapsible-header ACTIVE" >..</div>