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伪指令，该伪指令接受对象文字，其中键是如果条件评估为 true

的类，则将其添加到DOM元素中

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

如何在ngFor循环中动态更改Bootstrap Card组件的类属性？

1 个答案: