在ngFor angular 2中给出活动类onclick

Question

嗨,我有无序列表,所有这些都有活跃的类.我想在点击任何列表项时切换活动类.我的代码是这样的

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

任何人都可以帮我这样做吗？

Answer 1

只需创建一个索引属性.用于let i = index使用(单击)事件设置索引.然后检查是否selectedIndex === i将set class"active"设置为true

<ul class="sub_modules">
  <li *ngFor="let subModule of subModules; let i = index" 
      [class.active]="selectedIndex === i" 
      (click)="setIndex(i)">
    <a>{{ subModule.name }}</a>
  </li>
</ul>

然后在typescript文件上:只需设置selectedIndex.

export class ClassName {
   selectedIndex: number = null;

   setIndex(index: number) {
      selectedIndex = index;
   }
}

Answer 2

你可以这样做:

<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类中,第一个属性是您要添加的类,第二个属性是条件;