Цвет текста для разного статуса Angular 6

Question

У меня есть вид на угловой, вот так:

А это мой dashboard.component.ts:

 export class DashboardComponent implements OnInit {
 tablePresetColumns;
 tablePresetData;
 ngOnInit() {
   this.tablePresetColumns = [{id: 1,content: 'Username'},{id: 2,content: 'Status'}];
   this.tablePresetData = [[{id: 1,content: 'john.doe@random.com'},{id: 2,content: 'Busy'}],[{id: 1,content: 'test2@random.com'},{id: 2,content: 'overload'}]];
  }
 } 

И вот как я называю таблицу на dashboard.component:

<div eds-tile class="xl-4" style="height: 700px">
    <eds-tile-title>User on Shift</eds-tile-title>  
    <eds-table [columns]="tablePresetColumns" [data]="tablePresetData" [modes]="['compact', 'dashed']"></eds-table>
</div>

eds-table:

selector: 'eds-table',
template: "<table class=\"table\" [ngClass]=\"modes\">\n  <thead *ngIf=\"columns\">\n    <tr>\n      <th *ngFor=\"let col of columns\">\n        {{col.content}}\n      </th>\n    </tr>\n  </thead>\n  <tbody>\n    <tr *ngFor=\"let row of data\">\n      <td *ngFor=\"let cell of row\">\n        {{cell.content}}\n      </td>\n    </tr>\n  </tbody>\n</table>\n",

Что мне делать, если я хочу дать некоторыеЦвет в статусе, я имею в виду, что существуют условия, когда статус Занят, цвет текста меняется на зеленый, или цвет на холостом ходу меняется на желтый, а перегрузка меняется на красный.

Помогите мне, ребята ... Спасибо,

Answer 1

Вы можете использовать ниже

<td *ngFor="let cell of row" 
  [ngStyle]="{'color': (cell.content === 'Busy') ? 'green' : (cell.content === 'overload') ? 'red' : (cell.content === 'idle') ? 'yellow' : ''}">{{cell.content}}
</td>

Условие должно быть на cell.content, но не на row.content

Answer 2

<table class="table" [ngClass]="modes">
    <thead *ngIf="columns">
        <tr>
            <th *ngFor="let col of columns"> {{col.content}} </th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let row of data">
            <td [ngClass]="cell.content.toLowerCase()" *ngFor="let cell of row"> {{cell.content}} </td>
        </tr>
    </tbody>
</table>

и в css определяют класс для каждого типа статуса.

.busy {
  color: red;
  /* other css property you want to add */
}

.idle {
  color: red;
  /* other css property you want to add */
}

.overload {
  color: red;
  /* other css property you want to add */
}

здесь stackblitz и в моем конце все работает нормально.Я прикрепил этот снимок экрана только для справки.

Answer 3

Вы можете использовать ngClass с некоторой условной проверкой данных при генерации строки следующим образом,

<table class="table\" [ngClass]="modes\">
    <thead *ngIf="columns\">
        <tr>
            <th *ngFor="let col of columns"> {{col.content}} </th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let row of data">
            <td [ngClass]="{
                'busy' : cell.content == 'Busy',
                'idle' : cell.content == 'Idle'
                'overload' : cell.content == 'Overload'
             }" *ngFor="let cell of row"> {{cell.content}} </td>
        </tr>
    </tbody>
</table>

, и вы также должны иметь css для вышеприведенного:

.busy {
    background-color: green;
}

.idle {
    background-color: yellow;
}

.overload {
    background-color: red;
}