Динамический класс CSS

Question

Я хочу установить цвет текста динамически на основе данных, которые я получаю из бэкэнда. Например, если ответ:

 "names": [
            {
                "name": "apple",
            },
            {
                "name": "banana",
            },

Я хочу, чтобы текст на яблоке был красного цвета, на банане - желтого. Как я могу дать цвет этому тексту динамически?

Вот мой HTML:

<div *ngFor="let data of names">
    <span>{{data.name}}</span>
</div>

component.ts

  getData() {
    this.http.get('**')
      .subscribe(data => {
      });
  }

Answer 1

color = ["red", "green", ..];

<div *ngFor="let data of names;let i=index">
    <span [style.color]="color[i]">{{data.name}}</span>
</div>

Answer 2

Это будет очень похоже на это:

<div *ngFor="let data of names ;let i = index">
<h6 *ngIf="i%2 == 0" style="color: red" >{{data.name}}</h6>
<h6 *ngIf="i%2 != 0" style="color: yellow" >{{data.name}}</h6>
</div>