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

Question

当我点击它时，设法在ngFor 跨度上添加class，但是如果我点击另一个跨度，我会尝试删除当前类。

假设我有这些跨度来自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

我认为您应该存储大小选择（或索引）（并且您需要将它存储在数据库中吗？）然后像这样使用它：

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

您的控制器可能类似于（或者如果您已经有一个对象来存储它，则使用您的适当对象）：

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