ExpressionChangedAfterItHasBeenChecked ошибка при назначении случайного цвета в массиве?

Question

Я хочу назначить случайный цвет массива. Сначала он действительно работает, но затем я получаю сообщение об ошибке: «ExpressionChangedAfterItHasBeenChecked». Я даже вижу, как за секунду до появления сообщения цвет чипа меняется очень быстро. Так что это работает ... Как я могу решить эту проблему. (Я также добавил код и функции для создания чипов). Я знаю, что сначала мне нужно его инициализировать. Но я не знаю, как этого добиться, поэтому было бы неплохо, если бы вы могли писать прямо в моем коде. Я много чего пробовал, но ничего не получалось.

HTML

<ion-chip [color]="color[getRandomInt(color.length)]" class="chip" #chip *ngFor="let tag of tagName">

TS

export class Tag {
  color = ["ok", "nice","awesome","danger","white"];
  colorSelected = null;
  tag: string;
  constructor(values: Object = {}) {
    Object.assign(this, values);
  }

  ngAfterViewInit() {
    this.colorSelected = this.color[this.getRandomInt(this.color.length)];
  }
}

...

  color: string [] = ["ok", "nice","awesome","danger","white"]



  tagName: Tag[] = [];

...

add(): void {
  let id = this.tagName.length + 1;
  this.tagName.push(new Tag({ tag: "tag" + id }, ));
}

remove(tag: Tag) {
  let id = this.tagName.indexOf(tag);
  this.tagName.splice(id, 1);
}



getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

Answer 1

Если вы добавите метод console.log в getRandomInt, вы увидите, что он называется много-много раз , что не хорошо.

Вместо этого я бы предложил назначить цвет вашему объекту один раз (необходимо добавить color к классу Tag)

как то так

add(): void {
  let id = this.tagName.length + 1;
  this.tagName.push(new Tag({ tag: "tag" + id, color: this.color[this.getRandomInt(this.color.length)] }, ));
}

тогда в html это будет похоже на

<ion-chip [color]="tag.color" class="chip" #chip *ngFor="let tag of tagName">

Answer 2

Что вам нужно сделать, это убедиться, что вы устанавливаете цвет только один раз, поэтому вам нужно убрать вызов метода из шаблона. Вместо этого вы должны сделать:

this.tagName = this.tagName.map((tag) => tag.color =  this.color[this.getRandomInt(this.color.length)]);

Тогда в HTML:

<ion-chip [color]="tag.color"