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>

我有上面提到的代码。

如果height为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中的模板语法表。

如何在angular2中更改css类？

1 个答案: