Angular中如何获取动态生成的checkbox复选框选中值

你现有代码的核心问题是change事件没有传入当前遍历的卡通条目，无法直接关联选中状态和对应的数据，按以下步骤修改即可：

1. 调整HTML模板 #

首先给复选框绑定对应的值，同时把当前遍历的cartoon对象传给事件函数，避免索引错位、值匹配错误：

<div *ngFor="let cartoon of cartoonsData">
    <input 
        type="checkbox" 
        [value]="cartoon.id"
        (change)="onChange($event, cartoon)" 
    />
    <label>{{ cartoon.name }}</label>
</div>

2. 编写TypeScript逻辑 #

首先在组件类中定义一个数组存储所有选中的卡通项，再实现onChange的选中状态判断、数组增删逻辑：

// 存储选中项的数组，类型根据你的cartoonsData实际结构调整即可
selectedCartoons: Array<{id: number, name: string}> = [];

onChange(event: Event, cartoon: {id: number, name: string}) {
  // 获取复选框当前的选中状态
  const checkStatus = (event.target as HTMLInputElement).checked;

  if (checkStatus) {
    // 选中状态：将当前卡通项加入选中数组
    this.selectedCartoons.push(cartoon);
  } else {
    // 取消选中：从选中数组中移除对应项，用id匹配避免引用类型导致的匹配失败问题
    this.selectedCartoons = this.selectedCartoons.filter(item => item.id !== cartoon.id);
  }

  // 此处可直接拿到所有实时选中的值
  console.log('当前选中的卡通：', this.selectedCartoons);
}

更简便的可选实现 #

如果可以修改原始cartoonsData的条目结构，也可以直接给每个卡通项加checked属性，不需要单独维护选中数组：

<div *ngFor="let cartoon of cartoonsData">
    <input 
        type="checkbox" 
        [checked]="cartoon.checked"
        (change)="cartoon.checked = !cartoon.checked" 
    />
    <label>{{ cartoon.name }}</label>
</div>

需要获取选中值时，直接过滤原始数组即可：

getAllSelected() {
  return this.cartoonsData.filter(item => item.checked);
}

注意：不要仅依赖event.target.value获取选中条目，动态*ngFor渲染的列表如果只传事件对象不传当前遍历项，很容易出现数据和DOM不对应的问题。

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