Как изменить класс css в угловом2?

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> 

У меня есть код, как указано выше.

Я хочу изменить класс span на «pull-right fa fa-caret-down», если высота равна 0. Если высота - это высота элемента, тогда я хочу установить класс в «pull-right fa fa- каретка вверх». Как достичь этого с помощью углового2.

В основном я пытаюсь переключиться, и я хочу изменить значок при переключении.

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 для более полезных примеров шаблонов.