我对 Angular 看法是这样的:
这是我的 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>
我的编辑表:
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",
我的问题是,我应该怎么做才能使我的 View 至少变成这样,我的意思是有条件时状态为 Busy,
Icon Color are green, or Idle are Yellow, and Overload are Red (in the right of the text):
需要大家的支持,谢谢...
最佳答案
您可以在 <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;
}
关于html - 不同状态 Angular 6 的图标颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54740957/