Angular - Условное форматирование метки с помощью ngIf и ngFor с использованием regex и css

Question

Я хочу условно раскрасить некоторые метки из данных, которые я получаю от веб-службы.Веб-служба работает нормально, и данные сохраняются в массиве b.

Например, если метка содержит «синий», закрасьте его синим, если метка содержит «красный», закрасьте его красным и т. Д. Iбудет максимум 6 условий.

  <div class="centered">
        <h2>List of labels </h2>
                <label *ngFor="let a of b">  
                    {{a.x}}  
                  </label>
    </div>

Answer 1

Просто добавьте функцию к вашему Компоненту, которая возвращает любой цвет.

        <h2>List of labels </h2>
        <label *ngFor="let a of listA" [ngStyle]="{color: findColor(a)}">  
           {{a}}  
        </label>

Пример:

listA: string[] = ['I am red.', 'I am blue.', 'I am normal.']

  findColor(a: string): string {
    if(a.includes('red')) {
      return "#ff0000";
    }
    if(a.includes('blue')) {
      return "#0000ff";
    }
    return null;
  }

Answer 2

Наконец-то я понял хитрость

HTML

<div class="centered">
        <h2>List of labels </h2>
                <label *ngFor="let a of b" [ngStyle]=" {color:findColor(a.x)}">

                    {{a.x}}  
                  </label>
    </div>

Машинопись

public findColor(a: string): string {

      var blue = a.match(/blue/);
      var red = a.match(/red/);
      if(red) {
        return "#ff0000";
      }
      if(blue) {
        return "#0000ff";
      }
      return null;
    }

Спасибо всем за помощь.Прекрасно работает с регулярным выражением:)

Answer 3

Что вам нужно, это ngStyle.

<div class="centered">
        <h2>List of labels </h2>
        <label *ngFor="let a of b" [ngStyle]="{color: a.color}">  
           {{a.x}}  
        </label>
</div>

Или попросите ваш сервер предоставить classNames и использовать [ngClass]