Angular中ngFor渲染的复选框如何绑定收藏英雄列表实现选中状态同步

云原生阿岚

2026-9-24

实现方案

你可以通过Angular的属性绑定+事件监听实现选中状态和用户收藏数据的双向同步，具体修改如下：

1. 组件类补充逻辑

首先在组件TS文件中新增判断是否收藏、处理勾选状态变化的方法，注意处理两类数据id类型不一致的问题（英雄id为数字，用户收藏的id为字符串）：

// 原有数据定义保持不变
heroes = [
  {id: 1, name:'Superman'},
  {id: 2, name:'Batman'},
  {id: 5, name:'BatGirl'},
  {id: 3, name:'Robin'},
  {id: 4, name:'Flash'}
];

user = {
  id: 1, 
  name: 'Jack', 
  favoiriteSuperHeoros: [ {id: "1"} , {id: "2"} ]
};

// 判断当前英雄是否被收藏
isHeroFavorited(heroId: number): boolean {
  return this.user.favoiriteSuperHeoros.some(favItem => Number(favItem.id) === heroId);
}

// 同步用户勾选操作到收藏数据
onCheckChange(heroId: number, isChecked: boolean): void {
  if (isChecked) {
    // 新增收藏，保持id为字符串和原有格式统一
    this.user.favoiriteSuperHeoros.push({id: heroId.toString()});
  } else {
    // 移除收藏
    this.user.favoiriteSuperHeoros = this.user.favoiriteSuperHeoros.filter(
      favItem => Number(favItem.id) !== heroId
    );
  }
}

2. 模板修改绑定逻辑

修改复选框的HTML代码，绑定checked属性和change事件：

<div class="form-check" *ngFor="let p of heroes">
  <input 
    class="form-check-input" 
    type="checkbox" 
    [value]="p.id" 
    [id]="p.id"
    <!-- 绑定选中状态 -->
    [checked]="isHeroFavorited(p.id)"
    <!-- 绑定勾选变化事件 -->
    (change)="onCheckChange(p.id, $event.target.checked)"
  >
  <label class="form-check-label" [for]="p.id">
    {{p.name}}
  </label>
</div>