如何更改angular2中的css类?

问题描述

<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实现此目标.

I want to change the span class to "pull-right fa fa-caret-down" if height is 0.If height is the element height then I want to set the class to "pull-right fa fa-caret-up". How to achieve this using angular2.

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

Basically I am trying to toggle and I want to change the icon on toggling.

推荐答案

我不确定高度的计算是否正确，因为我的猜测是 el.scrollHeight 是未定义.但是，我无法根据您的示例对此进行判断.

I'm not sure if the calculation of the height works correctly, because my guess is that el.scrollHeight is undefined. However, I cannot judge this based on your example.

有两种在两种情况下都是静态的类.我在下面的代码示例中使用常规类属性声明了这些属性. fa-caret-down 和 fa-caret-up 取决于表达式.对于您要使用的形式: [class.name-of-class] =表达式" .

There are two classes which are static in both situations. I've declared those using the regular class attribute in the code example below. fa-caret-down and fa-caret-up depend on an expression. For those you want to use the form: [class.name-of-class]="expression".

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

请参阅角度备忘单中的模板语法表有关更有用的模板示例.

Refer to the template syntax table within the Angular Cheat Sheet for more useful template examples.

这篇关于如何更改angular2中的css类?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！