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

Question

如何放置＆＃34;活跃＆＃34;基于typeScript布尔条件的元素中的类？

我的用例：

而不仅仅是像这样的class="collapsible-header "

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

我希望这样写：

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

如你所见，还有＆＃34;活跃＆＃34;在那里上课。 但这应该只出现，并且只有myBool是真的

我们如何实现这一目标？

Answer 1

您也可以使用：

[class.active]="someCondition"

  

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

有关官方文档的更多信息：https://angular.io/guide/template-syntax#class-binding

Answer 2

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

解决方案1）

…---A---B---C---F---G---D'---E' master
                    |
               origin/master

解决方案2）

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

解决方案3）

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

解决方案4）

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

我认为解决方案2对我的用例来说是最直接的。