Как добавить цвет фона в строку таблицы на основе данных в ячейке таблицы?

Question

Я использую директиву Angular *ngFor для генерации моей динамической таблицы. Вот структура ниже:

         <tr class="tr1" *ngFor="let participant of allParticipants">

            <td class="participant-properties">{{participant.stakeholderId}}</td>

            <td class="participant-properties">{{participant.name}}</td>

            <td class="participant-properties">{{participant.rating}}</td>

         </tr>

Над таблицей загрузки, когда я иду на эту конкретную страницу. Выше упомянутого tr данные последней таблицы (td) содержат значения для rating:active .rejected и warn. Я хочу закрасить всю строку таблицы, которая имеет значение active зеленым, warn желтым и rejected красным во время его отображения.

Answer 1

Вы можете создать класс для каждого стиля, например так:

tr.active td {
  background-color: #ddffdd;
}

tr.warn td {
  background-color: #ffffbb;
}

tr.rejected td {
  background-color: #ffdddd;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td {
  padding: 3px;
}

А затем примените класс, используя ngClass, вот так:

<tr class="tr1" *ngFor="let participant of allParticipants" [ngClass]="participant.rating">

Вот пример Stackblitz

Answer 2

Вы можете использовать [ngStyle] для привязки к методу, который вернет соответствующий цвет.

В шаблоне добавьте [ngStyle] к <tr>:

<tr class="tr1" *ngFor="let participant of allParticipants" [ngStyle]="getBgColor(participant.rating)">

    <td class="participant-properties">{{participant.stakeholderId}}</td>

    <td class="participant-properties">{{participant.name}}</td>

    <td class="participant-properties">{{participant.rating}}</td>

</tr>

В контроллере вы можете использовать switch case или Map, чтобы проверить условие и вернуть соответствующий стиль как Object для [ngStyle] привязки в шаблоне.

getBgColor(rating: string){
    switch(rating)
    {
      case'active':
       return {'background':'#b3ffcc'};
      case 'warn':
       return {'background':'#ffffb3'};
      case 'rejected':
       return {'background':'#ffb3b3'};
    }
 }

Вот демонстрация стекаблиц: https://stackblitz.com/edit/angular-4gb9vh

Answer 3

это должно работать для вас:

$("table tr").find('td:last').each(function(){
    let td = $(this);
    let text = td.text();
    let color = 'white';
    switch (text) {
        case 'rejected': color = 'red'; break;
        case 'warn': color = 'orange'; break;
        case 'active': color = 'green'; break;
    }

    td.css('backgroundColor', color);
});