亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

基于項目值的 Angular 類名稱

基于項目值的 Angular 類名稱

月關寶盒 2023-09-07 17:09:02
<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>
查看完整描述

2 回答

?
長風秋雁

TA貢獻1757條經驗 獲得超7個贊

你可以簡單地在你的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];

}


查看完整回答
反對 回復 2023-09-07
?
喵喵時光機

TA貢獻1846條經驗 獲得超7個贊

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

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


查看完整回答
反對 回復 2023-09-07
  • 2 回答
  • 0 關注
  • 137 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

 幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

 公眾號

掃描二維碼
關注慕課網微信公眾號