面临错误：ExpressionChangedAfterItHasBeenCheckedError：

Question

我正在尝试使用下面的示例为 div 背景分配随机颜色随机颜色但面临以下错误：错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。您可以签入创建的控制台stackblitz。我已经尝试过以下答案：当组件属性依赖于当前日期时间时，如何管理 Angular2“表达式在检查后已更改”异常表达式___在检查后发生了变化但没有运气！有人可以调查一下并提供帮助吗？

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)]; 
}