Question

当我点击它时管理在class范围内添加ngFor但是如果我点击另一个范围，我正在尝试删除当前的类。

假设我有来自ngFor的这些跨度，当我点击S时会添加一个类active-span，如果我点击M它会添加一个类active-span但是从中删除该类S上。

<span class="jersey-size" [ngClass]="{'active-span': size.active}" (click)="getSizeData(size)">{{  size.size }}</span>

使用Renderer

点击功能

select(event:any){
  event.preventDefault()
  this.render.setElementClass(event.target, "active-span", true || false);
}

或使用ngClass，但这只会切换课程。

select(size){
 size.active = !size.active;
}
<span class="jersey-size" [ngClass]="{'active-span': size.active}" (click)="getSizeData(size)">{{  size.size }}</span>

我的问题是如何在选择/点击新范围时从上一个范围中删除该课程？

Answer 1

我认为你应该存储大小选择（或索引）（你需要它存储在db no？中）然后使用它：

[ngClass]="{'active-span': size.size === selectedSize}"

您的控制器可能类似（或者如果您已经有一个存储它，请使用您正确的对象）：

selectedSize: string;
select(size){
 this.selectedSize = size.size;
}

如何在Angular2中的ngFor span中添加/删除类？

1 个答案: