在 ngFor angular 2 中激活 class onclick

give active class onclick in ngFor angular 2

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

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

谁能帮我做这个?

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

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

您可以这样做:

<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,第二个是条件;

做个索引就可以了属性。使用 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;
   }
}

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

  • 您只能添加 via via [ngClass].
  • 您不能像 :active selector.
  • 添加 选择器
<li [ngClass]="{'active': isActive === true}">

注意区别:

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

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

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

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;
}