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

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

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
32
1

Ответы 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, которая вернет цвет фона

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

  • Другие вопросы по теме