Ion-Slide单卡片独立控制展开/折叠的实现问题

问题场景 #

在Ion Slides中展示一组卡片，每张卡片带有箭头图标，点击可折叠/展开卡片内的详情区域，折叠时箭头通过CSS的scaleY()翻转。当前代码可实现基础功能，但点击时所有卡片的详情会同时展开/折叠，需要改为仅操作选中的单张卡片。

问题根源 #

原代码使用单个全局布尔变量（travdetails）控制所有卡片的展开状态，所有卡片绑定同一个变量，因此点击任意卡片都会触发所有卡片的状态同步变化。

解决方案 #

通过给每个卡片绑定独立的状态变量，实现单卡片的独立控制，具体修改如下：

1. 修改TypeScript文件（home.page.ts）

将单个全局变量替换为包含每个卡片状态的数组，新增切换状态的方法：

// 定义卡片数据，每个条目包含内容和独立的展开状态
travelItems = [
  { id: 1, title: "Some Text", details: "Some Details Text", isExpanded: true },
  { id: 2, title: "Another Text", details: "Another Details Text", isExpanded: true },
  // 可添加更多卡片数据
];

// 切换指定卡片的展开状态
toggleExpand(item: any) {
  item.isExpanded = !item.isExpanded;
}

2. 修改HTML文件（home.page.html）

使用*ngFor循环渲染卡片，绑定每个卡片的独立状态，并用[ngClass]简化箭头翻转的控制：

<ion-slides>
  <ion-slide *ngFor="let item of travelItems">
    <ion-card>
      <!-- 用ngClass控制箭头翻转，替代原有的两个重复img标签 -->
      <ion-img 
        src="pathicon" 
        [ngClass]="{'flip': !item.isExpanded}"
        (click)="toggleExpand(item)"
      ></ion-img>
      <ion-text>{{ item.title }}</ion-text>
      <!-- 绑定当前卡片的独立展开状态 -->
      <div *ngIf="item.isExpanded">
        <ion-text>{{ item.details }}</ion-text>
      </div>
    </ion-card>
  </ion-slide>
</ion-slides>

3. 修改SCSS文件（home.page.scss）

将原有的ID选择器改为类选择器（避免循环中ID重复的问题）：

.flip { 
  transform: scaleY(-1); 
}

核心改进点 #

• 每个卡片对应数组中的独立条目，isExpanded属性仅控制当前卡片的状态，不会影响其他卡片。
• 使用[ngClass]替代冗余的*ngIf判断，简化代码同时符合HTML规范（避免重复ID）。
• 点击事件传入当前卡片的条目对象，精准修改目标状态。

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