Faceing Error: 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 l oop. И без ошибок.

<ul>
    <li class="hero" *ngFor="let hero of heroes" appRandomColor>
      {{ hero }}
    </li>
</ul>

Предлагаю прочитать больше о Angular Обнаружение изменений, поскольку это поможет вам лучше понять эти ошибки. Вот некоторые статьи, которые я считаю очень полезными

• https://indepth.dev/a-gentle-introduction-into-change-detection-in-angular/

• https://indepth.dev/everything-you-need-to-know-about-change-detection-in-angular/

Редактировать

On Component.ts

colorsArray = ['#FF5733', '#DA4323', '#FFB1A0', '#BB523C', '#BB2505', '#DE4922'];

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