angular2 szablon div na czeku click jeśli element ma klasę

Question

Obecnie mam jakąś logikę, że chciałbym, aby uprościć, jeśli to możliwe tylko przy użyciu szablonu HTML na (kliknij)

Mam składany div, który po kliknięciu, staje się " aktywny”

obecnie mój div jest:

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

jestem następnie sprawdzanie listy klas na element

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 
    } 
} 

Chcę, aby ta akcja (click) działała tylko w przypadku, gdy klasa nie jest "aktywna" (co oznacza, że ​​nie powoduje aktywacji po kliknięciu jako "aktywny");

Jak mogę to zrobić tylko przy użyciu składni szablonu?

Answer 1

Powinieneś być w stanie zrobić to tak:

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

A potem w funkcji byłoby po prostu trzeba dodać klasę:

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">