在 ngFor angular 2 中激活 class onclick

Question

你好，我有一个无序列表，它们都处于活动状态 class。单击任何列表项时，我想切换活动 class。我的代码是这样的

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

谁能帮我做这个？

Answer 1

相信您可以在这里找到答案：

您可以通过 Angular 的 $index 将 CSS 定位并应用于 item/object。 post 比我更好地解释和演示了逻辑。

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 class 上，第一个属性是您要添加的 class，第二个是条件；

Answer 3

做个索引就可以了属性。使用 let i = index 使用（点击）事件设置索引。然后检查 selectedIndex === i 如果是，则将 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 4

我想补充并澄清一个可能的误解：

您只能添加类 via via [ngClass].
您不能像 :active selector.

选择器

<li [ngClass]="{'active': isActive === true}">

注意区别：

.li.active {
  // This works! :)
}

.li:active {
  // This doesn't work! :(
}

对某些人来说这可能是显而易见的，但我花了大约 15 分钟的反复试验才理解。

Answer 5

the loop
<div *ngFor="let item of divs; let i = index">
    <app-cool [index]="i"></app-cool>
</div>

the <app-cool></app-cool> html  
<div (click)="setActive()"  [class.active]="isActive()">

</div> 

the <app-cool></app-cool> ts
static activeIndex = -1;

@Input() index: number = -1;
    
public setActive(): void{
    ThisClass.activeIndex = this.index;
}

public isActive(): boolean{
    return ThisClass.activeIndex === this.index;
}

在 ngFor angular 2 中激活 class onclick

give active class onclick in ngFor angular 2

angular

ng-class

ngfor