Как я могу динамически изменить атрибут класса компонента Bootstrap Card в цикле ngFor?

Question

Я хотел бы отобразить карты с подходящим классом (опасность, предупреждение, информация, ..) в зависимости от атрибута category.color?

<div *ngFor="let  category of arryCategories" class="col-4 card">
    <div class="card text-white bg-danger mb-3" style="max-width: 18rem;">
        <div class="card-header">{{category.description}}</div>
        <div class="card-body">
            <h5 class="card-title">{{category.color}}</h5>
            <!-- a><img class="card-img-top" src="{{category.icon}}" alt="Card image cap"></a -->
            <div align="center"> <a id="'{{category.id}}'" (click)="toggle($event)" class="btn btn-primary">select category</a> </div>
        </div>
    </div>
</div>

Answer 1

Вы можете использовать директиву ngClass, она принимает литерал объекта, где ключи - это классы, которые добавляются к элементу DOM, если условие оценивается как true

<div *ngFor="let category of arryCategories" 
     [ngClass]="{'danger':category.color === 'RED', 'warning':category.color === 'ORANGE'}">
</div>