【问题标题】：Facing Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked面临错误：ExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改
【发布时间】：2020-06-29 07:51:40
【问题描述】：

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

但面临以下错误：

错误：ExpressionChangedAfterItHasBeenCheckedError：表达式有检查后改了。

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

我已经尝试过以下答案：

但没有运气！任何人都可以看看这个并提供帮助吗？

【问题讨论】：

标签： html angular typescript random background-color

【解决方案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>

我建议阅读更多有关 Angular Change Detection 的内容，因为它将帮助您更多地了解这些错误。这里有一些我觉得很有帮助的文章

编辑

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

【讨论】：

让我试试你的答案。
有没有办法从预定义的颜色数组中分配随机颜色？
是的，你可以这样做：``` js @Input('appRandomColor') color: string; ngOnInit() { // 如果你想添加随机颜色 make if 语句在这里检查用户是否有 // 把颜色放在 Input this.element.nativeElement.style.color = color; } ``` on template.html ``` html [appRandomColor]=" 'red' " // 或者可以是变量 ```
或者您可以将预定义的颜色数组添加到appRandomColor指令函数中。
你能给我一个例子来将预定义的数组添加到指令中吗？