如何更改angular2中的css类？

Question

<button type="button" class="btn btn-primary" (click)="height = height ? 0 : el.scrollHeight">
   Toggle button<span id="Section1_togglearrow" class="pull-right fa fa-caret-up" style="margin: 2px auto; font-size: 20px;"></span>
</button>

我有上面提到的代码。

如果高度为 0，我想将 span 类更改为“pull-right fa fa-caret-down”。 如果 height 是元素高度，那么我想将类设置为“pull-right fa fa-caret-up”。如何使用 angular2 实现这一点。

基本上我正在尝试切换，我想更改切换时的图标。

Answer 1

我不确定高度的计算是否正确，因为我的猜测是el.scrollHeight 是undefined。但是，我无法根据您的示例来判断这一点。

有两个类在这两种情况下都是静态的。我已经在下面的代码示例中声明了使用常规类属性的那些。 fa-caret-down 和 fa-caret-up 依赖于一个表达式。对于那些你想使用表格的人：[class.name-of-class]="expression"。

<span class="pull-right fa" 
   [class.fa-caret-down]="height === 0" 
   [class.fa-caret-up]="height > 0">
</span>

有关更多有用的模板示例，请参阅Angular Cheat Sheet 中的模板语法表。