Я только начал изучать Angular 5 и нашел этот интересный формат таблицы данных, который хочу использовать в своем проекте Angular: https://bootsnipp.com/snippets/featured/condensed-table-example, особенно чтобы получить другой цвет для каждой метки в столбце, как в столбце «статус» в ссылке выше. В этом примере метки жестко запрограммированы в таблице, в то время как в моем случае я хотел бы получить их прямо из моей базы данных и отобразить их в пользовательском интерфейсе (с вариациями цвета).
<div class = "container">
<div class = "row">
<div class = "span5">
<table class = "table table-striped table-condensed">
<thead>
<tr>
<th>Username</th>
<th>Date registered</th>
<th>Role</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Donna R. Folse</td>
<td>2012/05/06</td>
<td>Editor</td>
<td><span class = "label label-success">Active</span>
</td>
</tr>
<tr>
<td>Emily F. Burns</td>
<td>2011/12/01</td>
<td>Staff</td>
<td><span class = "label label-important">Banned</span></td>
</tr>
<tr>
<td>Andrew A. Stout</td>
<td>2010/08/21</td>
<td>User</td>
<td><span class = "label">Inactive</span></td>
</tr>
<tr>
<td>Mary M. Bryan</td>
<td>2009/04/11</td>
<td>Editor</td>
<td><span class = "label label-warning">Pending</span></td>
</tr>
<tr>
<td>Mary A. Lewis</td>
<td>2007/02/01</td>
<td>Staff</td>
<td><span class = "label label-success">Active</span></td>
</tr>
</tbody>
</table>
Я думал об использовании ngSwitch, но не уверен. Есть идеи, как это сделать? Спасибо!
Я думаю, вы могли бы использовать директиву [ngStyle]
учитывая, что у вас есть массив пользователей xD вы могли бы установить что-то вроде
<ul *ngFor = "let user of users">
<li [ngStyle] = "{'background':getColor(user.status)}">{{user.name}}{{user.status}}</li>
</ul>
и выполните такую функцию в своем TS
getColor(status){
switch (status){
case "Inactive":
return 'gray';
case "Banned":
return 'red';
case "Active":
return 'green';
}
и скажем
users: any[] = [
{
"name" : "The First dude",
"status" : "Banned"
},
{
"name" : "The second one",
"status" : "Active"
}
];
в этом случае каждый раз, когда вызывается пользователь, будет запускаться функция getColor, которая вернет цвет фона
Извините за мой английский xD, мне нужно многому научиться