ExpressionChangedAfterItHasBeenCheckedError：Angular Material选择列表异常咨询

Hey there! Let's dig into why one of your Angular Material selection lists is throwing that error while the other works smoothly—even after you tried those lifecycle hook fixes that only masked the console error instead of solving the root issue.

1. Mismatched Selection Binding & State Handling #

Chances are, your two lists are using different binding patterns, and the broken one has a mismatch between its selected value state and how the component expects it:

• If one list uses [(ngModel)] with a properly initialized component property, but the other uses formControlName without setting up the corresponding FormControl in your component class, that's a common trigger.
• Double-check if the working list uses a (selectionChange) handler to explicitly update your component's selected value property, while the broken list skips this step and relies on implicit binding that falls out of sync.

2. Async Data Initialization Timing Issues #

Angular Material selection lists need their option data to be available when they render. If the problematic list's data loads asynchronously (like from an API) but you're not handling that async state correctly:

• The list might try to render before the data is ready, leading to a mismatch between the pre-set selected value and the actual available options.
• Compare how you load data for both lists—maybe the working one uses *ngIf="yourData?.length" to wait for data, while the broken list renders immediately, causing early-rendering conflicts.

3. Selection Mode & Property Type Mismatch #

Angular Material selection lists support different modes (single, multiple, checkbox), and each requires a matching property type in your component:

• For example, if your broken list uses selectionMode="multiple" but you're binding it to a single value (instead of an array), this creates a fundamental mismatch that lifecycle hooks can't fix—they only suppress the error, not the underlying issue.
• Verify the selectionMode attribute on both lists and ensure your component's selected property matches (array for multiple mode, single value for single mode).

4. Change Detection Strategy Conflicts #

If the parent components of your two lists use different change detection strategies (e.g., one uses ChangeDetectionStrategy.OnPush and the other doesn't), this can cause unexpected sync issues:

• An OnPush component won't detect changes to the selection list's data or selected value unless you explicitly trigger change detection or use observables with the async pipe.
• Check the changeDetection property in the @Component decorator for both parent components, and adjust to ensure data/selection changes are properly detected.

5. Template Typos or Misused Directives #

Small template differences can cause big issues. Compare the markup of both lists line by line to spot:

• Missing or incorrectly bound [value] attributes on mat-list-option elements.
• Duplicate template reference variables (like #list) that might interfere with selection tracking.
• Misplaced Angular Material directives (e.g., mat-selection-list wrapped incorrectly around other elements).

Quick Troubleshooting Tip #

Try wrapping your problematic selection list with *ngIf="yourOptionData?.length > 0"—this ensures the list only renders once its option data is fully loaded, which often fixes initialization mismatches that lifecycle hooks can't resolve on their own.

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