Переменная сценария типа не обновляется в html после вызова функции в angular 6

Question

Пример программы TS:

thunderSuperDrop$ = false;
public action = {
    superDropActivate(){
        this.thunderSuperDrop$ = !this.thunderSuperDrop$;
        console.log(this.thunderSuperDrop$);
    }
}

HTML:

<div class="header-links same-line" 
(click)="action.superDropActivate()"></div>{{thunderSuperDrop$}}

Первоначально переменная thunderSuperDrop $ установлена ​​в значение false и появляется в DOM.Его не обновляется после применения функции, которая работает нормально.

Answer 1

Попробуйте следующим образом

superDropActivate(){
    this.thunderSuperDrop$ = true;
    console.log(this.thunderSuperDrop$);
}

HTML

<div class="header-links same-line" 
(click)="superDropActivate()">{{thunderSuperDrop$}}</div>