Angular中如何在*ngFor循环中获取被点击复选框的键值，并在valueChanges中无需遍历实现点击顺序跟踪

云原生阿岚

2026-4-28

好问题！其实valueChanges确实没办法直接告诉你是哪个具体技能触发了值变化——它只返回整个表单的最终状态，没法关联到单次点击的目标。不过我们可以通过修改点击事件的逻辑，轻松实现你要的「按点击顺序追踪选中技能」的需求，完全不需要遍历整个表单值。

具体解决方案

1. 先在组件里维护一个追踪数组

在你的组件类中定义一个数组，专门用来存储按点击顺序选中的技能：

skillTracker: string[] = [];

2. 给点击事件传递选中状态

修改HTML里的mat-checkbox，让点击事件同时传递当前技能和复选框的选中状态（通过$event.checked）：

<mat-checkbox 
  [disabled]='enableSkill(skill)' 
  [formControlName]='skill' 
  (click)='onClick(skill, $event.checked)'
>
  {{ skill }}
</mat-checkbox>

3. 实现`onClick`的追踪逻辑

更新你的onClick方法，根据选中状态来添加或移除技能到追踪数组中：

onClick(skill: string, isChecked: boolean): void {
  if (isChecked) {
    // 选中时：如果技能还没在数组里，就添加进去（避免重复）
    if (!this.skillTracker.includes(skill)) {
      this.skillTracker.push(skill);
    }
  } else {
    // 取消选中时：从数组里移除对应的技能
    const skillIndex = this.skillTracker.indexOf(skill);
    if (skillIndex !== -1) {
      this.skillTracker.splice(skillIndex, 1);
    }
  }

  // 这里可以直接使用skillTracker，比如打印或者后续业务逻辑处理
  console.log('按点击顺序选中的技能:', this.skillTracker);
}