Angular复选框ngModel绑定异常：值更新后UI不同步问题

Hey, let's break down what's going on here and fix that annoying error + UI sync issue.

First off, that Expression has changed after it was checked error is Angular's dev-mode safety check—it runs two rounds of change detection to make sure no unexpected state changes happen after the first check. Your problem stems from mixing reactive forms (formControlName) and template-driven forms ([(ngModel)]) at the same time, plus messy checkbox binding logic that causes value inconsistencies during detection.

1. Fix the Form Binding Logic (Pick One, Don't Mix) #

Angular strongly discourages using formControlName and [(ngModel)] together (unless you're using specific ngModelOptions settings, which aren't needed here). Choose one form approach for your checkboxes:

Option A: Use Reactive Forms (Recommended for Complex Scenarios)

First, convert your myList into a FormArray in your component class, where each checkbox maps to a FormControl:

import { FormBuilder, FormGroup, FormArray } from '@angular/forms';

constructor(private fb: FormBuilder) {}

ngOnInit() {
  // Initialize form, mapping myList's checkBox states to a FormArray
  this.myForm = this.fb.group({
    myList: this.fb.array(
      this.myEntity.myList.map(item => this.fb.control(item.checkBox))
    )
  });

  // Listen for FormArray changes to sync back to myEntity and save
  this.myForm.get('myList')?.valueChanges.subscribe((checkedValues) => {
    checkedValues.forEach((isChecked, index) => {
      this.myEntity.myList[index].checkBox = isChecked;
      // Call your database save method here
    });
  });
}

Then update your template to remove ngModel and bind directly to the FormControl:

<tr *ngFor="let object of myEntity.myList; let i = index">
  <td>{{object.stringValue }}</td>
  <td>
    <input 
      type="checkbox" 
      [formControl]="myForm.get('myList').controls[i]"
      <!-- Use [value] for a unique identifier like object.id, not the checked state -->
    />
  </td>
  <td> {{object.checkBox}} </td>
</tr>

Option B: Use Template-Driven Forms (For Simple Use Cases)

If you prefer to skip reactive forms, remove formControlName entirely and use pure template binding:

<tr *ngFor="let object of myEntity.myList">
  <td>{{object.stringValue }}</td>
  <td>
    <input 
      type="checkbox" 
      name="myList"
      [checked]="object.checkBox"
      (change)="updateCheckbox(object, $event.target.checked)"
    />
  </td>
  <td> {{object.checkBox}} </td>
</tr>

Then add the update method to your component:

updateCheckbox(object: any, isChecked: boolean) {
  object.checkBox = isChecked;
  // Call your database save method here
}

2. Resolve Remaining Change Detection Errors (If Needed) #

If you still see the error after fixing bindings, it means Angular isn't picking up the state change after saving to the database. Manually trigger change detection:

import { ChangeDetectorRef } from '@angular/core';

constructor(private cdr: ChangeDetectorRef) {}

saveToDatabase() {
  // Your existing save logic here
  this.cdr.detectChanges(); // Tell Angular to update the UI manually
}

Why Your Original Code Failed #

• Mixing formControlName and [(ngModel)] created two conflicting sources of truth for the checkbox state, triggering Angular's double-check error.
• The value={{object.checked}} binding was redundant—checkbox value should be a unique identifier (like object.id), not the checked state itself. The checked state should be controlled by the form control or [checked] binding.

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