Angular模板绑定函数出现无限循环及NG0100错误该如何解决？

问题原因 #

Angular 默认的变更检测机制会在每一次异步事件、渲染帧触发后，校验所有模板绑定的表达式值是否更新，从而同步视图。你直接将getRandomColor()方法绑定到[value]属性，每次变更检测运行时都会重新调用该方法，而方法每次执行都会返回全新的随机色值，这就会让Angular判定绑定值发生了变化，触发新一轮变更检测，最终陷入无限循环。
你看到的NG0100: ExpressionChangedAfterItHasBeenCheckedError是Angular开发模式下的专属校验逻辑：变更检测流程跑完后会做二次校验，确认表达式值和检测过程中记录的值一致。你的方法每次调用返回值都不同，第一次检测拿到的色值和二次校验时调用返回的色值不一致，就会抛出该错误。
StackBlitz示例未复现报错是因为运行在生产模式，生产模式会跳过二次校验，但方法被频繁调用的问题本质上仍然存在，只是没有抛出错误而已。

解决方案 #

方案1（最推荐）：将随机色存储为组件属性，仅在需要时生成 #

仅在组件初始化或指定触发时机生成一次随机色，赋值给组件属性，模板直接绑定属性即可，避免绑定执行返回值不稳定的方法。
TS代码：

export class FiltersComponentComponent implements OnInit {
  // 初始化给默认色值
  randomColor = '#ffffff';

  constructor() { }

  ngOnInit(): void {
    // 组件初始化时生成一次随机色
    this.randomColor = this.getRandomColor();
  }

  private getRandomColor(): string {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }
}

HTML代码：

<input type="color" [value]="randomColor" title="Choose your color">

方案2：手动触发颜色更新 #

如果需要支持动态刷新颜色，将更新逻辑放到事件回调中执行，比如点击按钮时重新生成随机色赋值给属性：
HTML新增触发按钮：

<input type="color" [value]="randomColor" title="Choose your color">
<button (click)="refreshColor()">刷新颜色</button>

TS新增对应方法：

refreshColor() {
  this.randomColor = this.getRandomColor();
}

方案3：纯管道封装（不推荐，仅做兼容参考） #

如果必须在模板中调用方法获取值，可以将逻辑封装为纯管道，纯管道仅在输入参数变化时才会重新执行，不会频繁触发。

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