Angular2 шаблон div на клике проверить, имеет ли элемент класс

В настоящее время у меня есть некоторая логика, которую я хотел бы упростить, если возможно, используя только шаблон html (щелкните)

У меня есть сворачиваемый div, который при нажатии становится "активным"

в настоящее время мой div:

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

Затем я проверяю список классов на элементе

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

Я хочу, чтобы это действие (click) срабатывало только в том случае, если класс не является активным, (значение не срабатывает при нажатии "active" );

как я могу сделать это только с синтаксисом шаблона?

Ответ 1

Вы должны сделать это следующим образом:

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

А затем в функции вам просто нужно добавить класс:

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

Ответ 2

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