在ngFor中提供活动类onclick on angular 2 [英] give active class onclick in ngFor angular 2

问题描述

您好，我的清单是无序的，所有的人都有活动的课堂.我想在单击任何列表项时切换活动班级.我的代码是这样的

Hi I have unordered list and all of them have active class. I want to toggle active class when clicked to any list item. My code is like this

<ul class="sub_modules">
  <li *ngFor="let subModule of subModules" class="active">
    <a>{{ subModule.name }}</a>
  </li>
</ul>

有人可以帮助我做到这一点吗?

can anyone help me to do this?

推荐答案

您可以执行以下操作:

<ul class="sub_modules">
  <li (click)="activateClass(subModule)"
      *ngFor="let subModule of subModules"
      [ngClass]="{'active': subModule.active}">
    <a>{{ subModule.name }}</a>
  </li>
</ul>

在组件上

activateClass(subModule){
  subModule.active = !subModule.active;    
}

在Ng类中，第一个属性是您要添加的类，第二个属性是条件；

On the Ng class the first property is the class you wanna add and the second is the condition;

这篇关于在ngFor中提供活动类onclick on angular 2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！