Как динамически пульсировать цвет текста из массива цветов?

Question

У меня есть <span [innerHTML]="myHTML" [className]="myColor"></span> Мне нужно, чтобы текст innerHTML бесконечно менялся с одного цвета на другой.Количество цветов может варьироваться совсем немного, поэтому, если возможно, я не хочу писать кучу CSS-анимаций.

Я попытался использовать функцию async с циклом while, например так:
async colorChangeFunc(colors: string[]) { while(this.flagCalcComplete) { for (let i = 0; i < colors.length; i++) { this.myColor = colors[i]; setTimeout(null, 1000); } } }

Где colors - массив строк, соответствующих классу CSS.Тем не менее, я неправильно понял, как async работает в TS, и это, конечно, разбил браузер.

Answer 1

Используйте i * 1000 в цикле и установите style.color

См. Рабочий код

HTML

<span [style.color]="myColor">Hello angular</span>

TS

   for (let i = 0; i < this.colors.length; i++) {
        setTimeout(()=>{
         this.myColor = this.colors[i];
        }, i * 1000);
    }
  }