单击时检查元素是否具有类的angular2模板div

Question

我目前有一些逻辑，如果可能的话，我想在 (click) 上仅使用 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 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
}