基于项目值的 Angular 类名称

Question

<div>我想知道如何根据角度中的项目值添加动态类名称？例子项目状态为open添加类别bg-success或项目状态为pending添加类别bg-warning代码Componentconst badgeColors = {  'Open': 'bg-primary',  'pending': 'bg-warning',  'Finished': 'bg-success',  'Expired': 'bg-danger'}HTML<div class="col-md-3" *ngFor="let item of listOfData" :key="item.id">  <div class="card">    <div class="otherClasses bg-warning"></div> <-- I need to change this static `bg-warning` to dynamic `badgeColors`  </div></div>

Answer 1

你可以简单地在你的div上调用ngClass，就像

[ngClass]="displayDynamicColour(item.status)"

在你的ts中

const badgeColors = {

  'Open': 'bg-primary',

  'pending': 'bg-warning',

  'Finished': 'bg-success',

  'Expired': 'bg-danger'

}

displayDynamicColour(item){

return this.badgeColors[item];

}

Answer 2

您可以使用 ngClass 指令。例如：

<div [ngClass]="{'bg-success': (status === open), 'bg-warning': (status === pending)}"> </div>