时间戳

首页 > 解决方案 > 使用 Angular 将样式添加到特定的多个 div

javascript - 使用 Angular 将样式添加到特定的多个 div

问题描述

抱歉，我是 Angular 和 StackOverflow 的新手，我有 3 个 div，我想添加background-color: red到所有状态为请求付款的 div。它应该使第二个和第三个 div 的背景颜色，但它只使第三个

html

<div class="col-md-4 mb-4" *ngFor="let invoice of Invoices let i=index">
  <div id="{{'activeInvoice'+i}}" class=" d-flex justify-content-between align-items-center w-100  card-header ">
    <strong class="text-gray-dark">{{langVar.Invoice}} {{invoice.invoiceNumber}}</strong>
    <i class="fa fa-info-circle" title="show Details" aria-hidden="true" (click)="showInvoiceDetailsModal(invoice.id)"></i>
  </div>
</div>

for (var i = 0; i <= this.Invoices.length-1; i++) {
  console.log("invoice num", this.Invoices[i].invoiceNumber);
  console.log("order", this.Invoices[i].order.length);

  for (var j = 0; j <= this.Invoices[i].order.length - 1; j++) {
    console.log("STATUS", this.Invoices[i].order[j].status);
    if (this.Invoices[i].order[j].status == 'requestingPayment') {
      var elementValue = 'activeInvoice'+i;
      setTimeout(() => {
        document.getElementById(elementValue).classList.add("cardBackGround");
      }, 1000);
    }
    else {}
  }
}

标签： javascriptcssangular

解决方案

您可以使用 ngClass 有条件地以角度添加 CSS 类

 <div  [ngClass]={'cardBackGround': true }> </div>

// 应用你的条件而不是 true

推荐阅读