类可以在单击两个 div 上添加，相对于它们的索引

Question

>我有多个来自后端的div，现在我有一个根据他们的活动索引添加一个类"折叠卡"或"卡">

单击特定的div时，如果它具有"折叠卡"类，它将更改为"卡"类，反之亦然，但问题是一次两个div可以具有相同的类

<li *ngFor="let cardDetails of levelCardDetails; let index = index">
<div (click)="showCompeleteCard(index)" [ngClass]="(activeSkillCardIndex == index) ? 'card' : 
'collapsed-card'">
</div>
</li>
showCompeleteCard(index: number) {
this.activeSkillCardIndex = index;
}
activeSkillCardIndex: number = 0;

有什么办法吗？

Answer 1

我会添加一个设置动态类所需的可选参数。

以levelCardDetails为例，作为由以下人员组成的数组：

interface Something {
index: number;
name: string;
active?: boolean = false;
}

然后我们可以像你一样做一个ngFor：

<li *ngFor="let cardDetails of levelCardDetails; let index = index">
<div (click)="showCompeleteCard(index)" [ngClass]="[cardDetails.active ? 'card' : 'collapsed-card']">
</div>
</li>

最后我们可以编辑函数showCompeleteCard：

showCompeleteCard(index: number) {
this.activeSkillCardIndex[index].active = !this.activeSkillCardIndex[index].active;
}

Answer 2

您可以根据添加的属性切换折叠isCollapsed

试试这个：

工作演示

<li *ngFor="let cardDetails of levelCardDetails; let index = index">
<div (click)="collapse(index)" [ngClass]="cardDetails.isCollapsed ? 'collapsed-card' : 
'card'"> {{cardDetails.item}}
</div>
</li>

.ts

collapse(index) {
if (!this.levelCardDetails[index].isCollapsed) {
if(this.levelCardDetails.filter(item => item.isCollapsed == true).length < 2)
this.levelCardDetails[index].isCollapsed = !this.levelCardDetails[index]
.isCollapsed;
} else {
this.levelCardDetails[index].isCollapsed = !this.levelCardDetails[index]
.isCollapsed;
}
}