Angular中如何获取所有被切换过状态的复选框的取值列表

核心逻辑是提前保存所有复选框的初始选中状态，用户操作完成后对比当前状态和初始状态的差异，即可筛选出所有被用户修改过的选项。

步骤1：组件初始化时存储初始状态 #

在Angular组件的ngOnInit生命周期中，遍历文件列表保存初始选中状态，避免后续用户操作修改状态后无法追溯原始值。
组件TS代码示例：

import { Component, OnInit } from '@angular/core';

@Component({
  // 你的组件原有配置
})
export class YourComponent implements OnInit {
  files: any[] = []; // 从数据库获取的文件列表

  ngOnInit(): void {
    // 接口返回files数据后，为每个文件项追加初始状态存储字段
    this.files = this.files.map(file => ({
      ...file,
      originalIsPresent: file.isPresent // 该字段仅初始化时赋值，后续不随用户操作变更
    }));
  }

  getToggledCheckboxValues(): void {
    // 筛选当前状态和初始状态不一致的项，即为用户切换过的复选框
    const toggledFiles = this.files.filter(file => file.isPresent !== file.originalIsPresent);
    // 按需提取对应字段值，示例提取文件type
    const toggledValueList = toggledFiles.map(file => file.type);
    // 此处可自行处理生成的取值列表
    console.log('用户修改过的复选框值：', toggledValueList);
  }
}

步骤2：修正模板绑定逻辑 #

原代码中ng-selected是<option>标签的专属属性，复选框的选中状态需要用[(ngModel)]双向绑定，使用前请确保对应模块已导入FormsModule。
修改后的模板代码：

<ul>
    <li *ngFor="let file of files">
       <input type="checkbox" [(ngModel)]="file.isPresent"> {{file.type}}
    </li>
</ul>

<button (click)="getToggledCheckboxValues()"> Get Value </button>

可选优化：不污染原文件对象 #

如果你不想给原file对象添加额外字段，可以单独用Map存储初始状态：

// 组件内定义初始状态存储Map，用文件唯一id作为key
originalStateMap = new Map<number, boolean>();

// 初始化时存入初始值
this.files.forEach(file => {
  this.originalStateMap.set(file.id, file.isPresent);
});

// 对比时从Map取值即可
getToggledCheckboxValues(): void {
  const toggledValueList = this.files
    .filter(file => file.isPresent !== this.originalStateMap.get(file.id))
    .map(file => file.type);
  console.log(toggledValueList);
}

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