我如何在角度中添加 ngClass 需要显示状态为活动的红色，而其他应该是非活动的黑色 [重复]

Posted 2023-02-22

【中文标题】我如何在角度中添加 ngClass 需要显示状态为活动的红色，而其他应该是非活动的黑色 [重复]

【英文标题】：how do i add ngClass in angular need to show status active red and other should be inactive black [duplicate]

【发布时间】：2021-01-14 17:05:00

【问题描述】：

如何在 Angular 中添加 ngClass 以显示当前状态为活动的红色，而其他应为非活动的黑色？

<div *ngFor="let item of status_history; let i = index">
  <div [ngClass]="checkStatusClass(i)">
      <span class="material-icons">check_circle</span>
      <span class="status_font">item?.invoice_status?.data[0]?.status</span>
      <div class="history-font">item?.updated_at</div>
  </div>
</div>

【参考方案1】：

<div *ngFor="let item of status_history; let i = index">
  <div [ngClass]="'icons_inactive' : (i+1) === status_history.length, 'icons_active': (i+1) !== status_history.length">
      <span class="material-icons">check_circle</span>
      <span class="status_font">item?.invoice_status?.data[0]?.status</span>
      <div class="history-font">item?.updated_at</div>
  </div>
</div>

你试过了吗？

【讨论】：

不工作@arbghl

当您说最新状态处于活动状态时，这是否意味着它将成为 status_history 数组中的第一个元素？如果是这种情况，那么您可以执行

@Abid “不工作”不是回应，请解释您的问题或详细说明您的问题。据我所知，这个ngClass 语句等于你写的函数

【参考方案2】：

试试这个（未经测试）：

<div *ngFor="let item of status_history; let i = index">
  <div class="checkStatusClass(i)">
      <span class="material-icons">check_circle</span>
      <span class="status_font">item?.invoice_status?.data[0]?.status</span>
      <div class="history-font">item?.updated_at</div>
  </div>
</div>

【讨论】：

虽然这确实有效，但出于性能原因，不鼓励在模板中使用函数。