Question

嗨，我有无序列表，所有人都有活跃的课程。我想在点击任何列表项时切换活动类。我的代码就像这样

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

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

Answer 1

您可以执行以下操作：

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

Answer 2

只需创建一个索引属性。使用let i = index使用（click）事件设置索引。然后检查selectedIndex === i是否为设置类“活动”为真

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

我相信你可以在这里找到答案： AngularJs - Best-Practices on adding an active class on click (ng-repeat)

您可以通过Angular的$index将CSS定位并应用于项目/对象。这篇文章比我能更好地解释和演示逻辑。

在ngFor angular 2中给出活动类onclick

3 个答案: