面临错误：ExpressionChangedAfterItHasBeenCheckedError：

Question

我正在尝试使用下面的示例为 div 背景分配随机颜色

随机颜色

但面临以下错误：

错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。

您可以签入创建的控制台stackblitz。

我已经尝试过以下答案：

1. 当组件属性依赖于当前日期时间时，如何管理 Angular2“表达式在检查后已更改”异常

2. 表达式___在检查后发生了变化

但没有运气！有人可以调查一下并提供帮助吗？

Answer 1

一种解决方案是使用指令。所以我创建了一个名为 appRandomColor 的指令这是它的代码。import {Directive, ElementRef, Input, OnInit} from '@angular/core';@Directive({  selector: '[appRandomColor]'})export class RandomColorDirective implements OnInit {  constructor(private element: ElementRef) { }  ngOnInit() {      this.element.nativeElement.style.color = this.getRandomColor();  }  getRandomColor() {    var color = Math.floor(0x1000000 * Math.random()).toString(16);    return '#' + ('000000' + color).slice(-6);  }}并将其添加到 AppModule 中的声明中然后我将它应用到 *ngFor 循环。并且没有错误。<ul>    <li class="hero" *ngFor="let hero of heroes" appRandomColor>      {{ hero }}    </li></ul>在 Component.ts 上colorsArray = ['#FF5733', '#DA4323', '#FFB1A0', '#BB523C', '#BB2505', '#DE4922'];在 Component.html 上 <li class="hero" *ngFor="let hero of heroes" [appRandomColor]="colorsArray">       {{ hero }} </li>将预定义颜色数组添加到指令@Input('appRandomColor') colors: string[];  ngOnInit() {    this.element.nativeElement.style.color = colors[Math.floor(Math.random() * colors.length)];  }