Chrome console.log打印变量值异常，Angular双向绑定复选框问题排查

兄弟，这个坑我之前踩过！其实是Angular事件执行时机+浏览器控制台的“实时对象”特性共同导致的，我给你拆解清楚：

核心原因 #

Angular的[(ngModel)]双向绑定是语法糖，背后是[ngModel]（数据到视图）+(ngModelChange)（视图到数据）的组合。而你绑定的(click)事件，执行优先级在ngModelChange之前：

1. 点击checkbox后，先触发clicked函数
2. 此时Angular还没来得及把checkbox的最新状态同步到option.checked变量里
3. 你打印this.data时，浏览器控制台显示的是对象引用——当你后续在控制台展开这个对象，它会读取对象的最新状态（也就是Angular完成同步后的状态）
4. 但循环逐个打印this.data[i]时，取的是clicked函数执行时的快照值，也就是还没更新的checked: false

这就导致了“控制台展开data是更新后的状态，但循环打印是旧值”的矛盾现象。

解决方案 #

推荐两种靠谱的处理方式：

方式一：改用ngModelChange事件（最优雅）

直接绑定ngModelChange，它会在ngModel完成数据同步后触发，确保拿到的是最新状态：

<li *ngFor="let option of data">
  <label>
    <input type="checkbox" 
           (ngModelChange)="onOptionChecked(option)" 
           name="options" 
           [value]="option.value" 
           [(ngModel)]="option.checked" />
    {{option.name}}
  </label>
</li>

组件对应函数：

onOptionChecked(option: {name: string, value: string, checked: boolean}) {
  console.log('当前更新的选项:', option);
  console.log('完整数据:', this.data);
  this.data.forEach(item => console.log('逐个打印:', item));
}

方式二：若必须用click，延迟获取最新状态

通过setTimeout把打印逻辑放到下一个宏任务，等Angular完成变更检测和数据同步：

clicked(event: any) {
  setTimeout(() => {
    console.log(this.data);
    for(let i=0; i<this.data.length; i++) {
      console.log(this.data[i]);
    }
  }, 0);
}

不过这种属于“hack”式处理，优先推荐第一种方案。

验证小技巧 #

你可以在原clicked函数里加一行打印，直观验证时机问题：

clicked(event: any) {
  console.log('checkbox当前真实状态:', event.target.checked);
  console.log('绑定的变量值:', this.data.find(item => item.value === event.target.value)?.checked);
  // 原有打印逻辑...
}

你会发现前者是最新的勾选状态，后者还是旧值，直接坐实了事件执行顺序的问题。

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