Angular卡片列表中如何实现点击单张卡片仅自身翻转

预期实现交互：点击卡片列表中的单张卡片时，仅当前被点击的卡片执行翻转动画。
实际异常表现：点击任意一张卡片时，列表内所有卡片都会同步触发翻转动画。

关联代码截图 #

• HTML代码：
  
• TypeScript代码：
  

所有卡片共用了同一个全局布尔类型的翻转状态变量，状态变更时所有绑定该变量的卡片都会同步触发样式变更，因此出现全量翻转的问题。

1. 替换原有的全局布尔翻转状态，改为存储当前处于翻转状态的卡片唯一标识（卡片id、列表索引均可）
2. 卡片点击事件触发时，更新存储的标识为当前点击卡片的标识，重复点击同一张卡片则清空标识实现翻回效果
3. 模板中给单个卡片绑定翻转样式时，仅判断当前卡片的标识与存储的激活标识是否一致，一致才添加翻转样式

参考代码 #

TypeScript 部分 #

// 移除原全局定义的 isFlipped: boolean = false
// 定义变量存储当前激活翻转的卡片标识，默认无卡片翻转
activeFlippedCardKey: string | number | null = null;

// 卡片点击处理方法，入参为当前点击卡片的唯一标识
handleCardFlip(cardKey: string | number): void {
  this.activeFlippedCardKey = this.activeFlippedCardKey === cardKey ? null : cardKey;
}

HTML 部分 #

<!-- 卡片循环渲染结构示例 -->
<div class="card-item" *ngFor="let card of cardList; trackBy: trackByCardId" (click)="handleCardFlip(card.id)">
  <div class="card-inner" [class.flipped]="activeFlippedCardKey === card.id">
    <!-- 卡片正面、反面内容区域 -->
  </div>
</div>

提示：优先使用卡片数据自带的唯一id作为判断标识，如果列表不存在动态增删、排序操作，也可以用*ngFor自带的index索引作为标识。

内容的提问来源于stack exchange，提问作者ABGAR Mohammed