angular2 modello div per il check-click se elemento ha classe

Question

Al momento ho una certa logica che vorrei semplificare, se possibile, utilizzando solo il modello HTML on (click)

Ho un div pieghevole che se cliccato, diventa " attivo"

attualmente il mio div è:

<div class="collapsible-header blue darken-2" (click)="getDataForTable($event)"> 

sto quindi il controllo per l'elenco delle classi sull'elemento

function getDataForTable($event: any){ 
    let classList = $event.target.classList; 

    if(classList.contains("active")){ 
    //do nothing div is closing 
    } else { 
    //get data for table since we are opening the div to show the body 
    } 
} 

Voglio che questa azione (click) venga attivata solo se la classe non è "attiva" (che significa che non si attiva quando si fa clic su "attivo");

Come posso fare questo solo con la sintassi del modello?

Answer 1

Si dovrebbe essere in grado di farlo in questo modo:

<div class="collapsible-header blue darken-2" 
    (click)="$event.target.classList.contains('active') || getDataForTable($event)"> 

E poi nella funzione si sarebbe solo bisogno di aggiungere classe:

function getDataForTable($event: any) { 
    $event.target.classList.add('active'); 
    // get data for table since we are opening the div to show the body 
} 

Answer 2

<div #mydiv 
    class="collapsible-header blue darken-2"  
    (click)="mydiv.classList.contains('xxx') ? getDataForTable($event) : null">