如何让Angular中ngFor循环生成的列表内被点击的对应按钮消失？

你遇到的所有行图标同步消失的问题，核心是使用了全局公共变量控制所有行的图标显隐状态，变量更新后所有绑定该变量的元素都会同步触发变化。要实现单行独立控制，需要将显隐状态和*ngFor遍历的单个条目做绑定，常见实现方式有两种：

方案1：给activity条目新增状态标识（实现最简单） #

如果允许修改原activity对象的结构，直接给每个对象新增布尔类型的isStarted属性，初始值设为false即可。

模板代码示例 #

<div *ngFor="let activity of activities">
  <!-- 原有列表行的其他内容 -->
  <fa-icon 
    (click)="startActivity(activity)"
    *ngIf="!activity.isStarted"
  ></fa-icon>
</div>

组件方法修改 #

startActivity(activity: any) {
  // 保留你原有的业务逻辑代码
  activity.isStarted = true; // 仅修改当前点击条目的状态
}

方案2：独立维护已点击集合（不修改原对象） #

如果activity是后端接口返回的固定结构，不希望修改原对象内容，可以单独维护一个存储已点击条目标识的Set集合。

组件变量定义 #

// 假设每个activity都有唯一的id字段，类型根据你实际的id类型调整即可
startedIds = new Set<number>();

模板代码示例 #

<div *ngFor="let activity of activities">
  <!-- 原有列表行的其他内容 -->
  <fa-icon 
    (click)="startActivity(activity)"
    *ngIf="!startedIds.has(activity.id)"
  ></fa-icon>
</div>

组件方法修改 #

startActivity(activity: any) {
  // 保留你原有的业务逻辑代码
  this.startedIds.add(activity.id); // 仅把当前点击条目的id加入已点击集合
}

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