Цвет значка для разных статусов угловой 6 - PullRequest
Новая
       9

Цвет значка для разных статусов угловой 6

0 голосов
/ 18 февраля 2019

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

Это мой 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: 

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",

И мой вопрос: как мне сделать так, чтобы мой взгляд стал хотя бы таким жеэто, я имею в виду, есть условия, когда статус Занят,

Цвет значка - зеленый, или режим ожидания - желтый, а перегрузка - красный (справа от текста):

Нужна поддержка, ребята, спасибо ...

1 Ответ

0 голосов
/ 18 февраля 2019

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

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

ИЛИ

следующим способом, 

<td [ngClass]="{
                'busy' : cell.content == 'Busy',
                'idle' : cell.content == 'Idle'
                'overload' : cell.content == 'Overload'
             }" *ngFor="let cell of row"> {{cell.content}} </td>

В вашемcss 

.busy {
    color: green;
}

.idle {
    color: yellow;
}

.overload {
    color: red;
}

ОБНОВЛЕННЫЙ ОТВЕТ 

   <td *ngFor="let cell of row"> {{cell.content}} 
      <span class ="dot" [ngClass]="{
        'dot-red' : cell.content == 'Busy',
        'dot-green' : cell.content == 'Idle',
        'dot-yellow' : cell.content == 'overload'}"></span></td>

.dot {
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: inline-block;
}
.dot-red {
  background-color: red;
}
.dot-green {
  background-color: green;
}
.dot-yellow {
  background-color: yellow;
}
...