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の場合、スパンクラスを「プル右faファクシミリ」に変更したい。 高さが要素の高さである場合、クラスを「プル右fa fa-キャレット・アップ "。 angle2を使ってこれを達成する方法。

基本的に私はトグルしようとしており、トグルでアイコンを変更したいと思います。

Answer 1

私の推測ではel.scrollHeightがundefinedであるため、高さの計算が正しく機能するかどうかはわかりません。しかし、私はあなたの例に基づいてこれを判断することはできません。

両方の状況で静的な2つのクラスがあります。以下のコード例では、通常のクラス属性を使用するクラスを宣言しています。 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内のテンプレートの構文テーブルを参照してください。