为数组分配随机颜色时出现ExpressionChangedAfterItHasBeenChecked错误的解决

这个错误我太熟了！本质就是Angular的变更检测机制在“找茬”——它刚检查完组件数据和视图的一致性，你转头就修改了绑定的属性值，它就会抛出这个错误。你看到颜色快速变化，其实是第一次渲染用了初始值，随后你修改了颜色触发了二次变更，但Angular的检测周期已经结束了，所以报错。

下面直接针对你的场景修改代码，分两种常见情况处理：

情况1：你在组件初始化时给数组分配颜色（比如ngOnInit里） #

假设你原来的组件代码是这样的：

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

export class YourChipComponent implements OnInit {
  chips = [
    { label: '标签1' },
    { label: '标签2' },
    { label: '标签3' }
  ];

  ngOnInit() {
    // 直接给每个芯片分配随机颜色
    this.chips.forEach(chip => {
      chip.bgColor = this.generateRandomColor();
    });
  }

  generateRandomColor() {
    return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
  }
}

修改后的代码： #

引入ChangeDetectorRef手动触发变更检测，让Angular认可你在检测周期内的修改：

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

export class YourChipComponent implements OnInit {
  chips = [
    { label: '标签1' },
    { label: '标签2' },
    { label: '标签3' }
  ];

  // 注入ChangeDetectorRef
  constructor(private cdr: ChangeDetectorRef) {}

  ngOnInit() {
    this.chips.forEach(chip => {
      chip.bgColor = this.generateRandomColor();
    });
    // 手动告诉Angular：我改完了，再检查一次！
    this.cdr.detectChanges();
  }

  generateRandomColor() {
    return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
  }
}

情况2：你在模板里直接调用方法生成颜色（比如[style.backgroundColor]="generateRandomColor()"） #

这种情况更常见！模板里的方法会在每次变更检测时被调用，不仅会导致颜色不停闪烁，还会触发这个错误。

修改方案：提前预生成颜色，模板直接绑定属性 #

组件代码同上（用ngOnInit+cdr的方式），模板从：

<mat-chip *ngFor="let chip of chips" [style.backgroundColor]="generateRandomColor()">
  {{ chip.label }}
</mat-chip>

改成：

<mat-chip *ngFor="let chip of chips" [style.backgroundColor]="chip.bgColor">
  {{ chip.label }}
</mat-chip>

为什么这么改？ #

• ChangeDetectorRef.detectChanges()：强制Angular立即执行一次变更检测，把你在ngOnInit里修改的颜色值同步到视图，避免“检测后值又变更”的冲突。
• 预生成颜色而非模板调用方法：既解决了错误，还提升了性能——模板里的方法调用会在每次变更检测时执行，频繁生成随机颜色完全没必要。

如果你的代码是在ngAfterViewInit这类晚于变更检测的钩子中修改颜色，同样可以用cdr.detectChanges()来解决，原理是一样的。

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