Нужна помощь в том, как использовать компонент таблицы начальной загрузки в моем проекте Angular

Question

Я только начал изучать 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, но я не уверен. Есть идеи, как это сделать? Спасибо!

Answer 1

Я думаю, вы могли бы использовать директиву [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 срабатывает и возвращает цвет фона

: P

Извините за мой английский xD У меня есть чему поучиться