angular2模板div点击检查元素是否有类

Question

我目前有一些逻辑,我想简化,如果可能只使用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)动作只有在类不是"活动"时触发(意味着当点击为"活动"时不会触发);

我怎么能用模板语法呢？

Answer 1

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

Answer 2

你应该能够这样做:

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