基于项目值的 Angular 类名称

Question

<div>我想知道如何根据角度中的项目值添加动态类名称？

例子

项目状态为open添加类别bg-success或项目状态为pending添加类别bg-warning

代码

Component

const 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 = {&nbsp; 'Open': 'bg-primary',&nbsp; 'pending': 'bg-warning',&nbsp; 'Finished': 'bg-success',&nbsp; 'Expired': 'bg-danger'}displayDynamicColour(item){return this.badgeColors[item];}

Answer 2

您可以使用 ngClass 指令。例如：<div&nbsp;[ngClass]="{'bg-success':&nbsp;(status&nbsp;===&nbsp;open),&nbsp;'bg-warning':&nbsp;(status&nbsp;===&nbsp;pending)}">&nbsp;</div>