单击angular2模板div检查元素是否具有类 [英] angular2 template div on click check if element has class

问题描述

我目前有一些逻辑，如果可能的话，我想简化为仅使用(点击)上的html模板

I currently have some logic that I would like to simplify if possible using only the html template on (click)

我有一个可折叠的div，当单击该div时它会变为活动"

I have a collapsible div that when clicked, becomes "active"

当前我的div是:

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

然后我要检查元素上的类列表

I am then checking for the list of classes on the 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
  }
}

我只希望在类不是活动"的情况下触发此(click)操作 (表示点击为有效"时不会触发)；

I want this (click) action only to fire if the class is not "active" (meaning don't fire when clicked as "active");

我该如何仅使用模板语法?

how can I do this with template syntax only?

推荐答案

您应该可以这样做:

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

然后在函数中，您只需要添加类:

And then in the function you would just need to add class:

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

这篇关于单击angular2模板div检查元素是否具有类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！