css - CSS td 条件背景色设置

Question

假设我有以下角度表

  <table>
    <tr *ngFor="let company of investTable; let i = index">
      <td>
       {{company.name}}
      </td>
      <td>
       {{company.price}}
      </td>
      <td>
       {{company.profit}}
      </td>
    </tr>
  </table>

如何根据单元格值制作一个简洁的解决方案，让表格单元格具有背景颜色？可以说，如果公司利润为正，则将其设为绿色。

标签： cssangularhtml-tableconditional-statementsbackground-color

Answer 1

在 CSS 中

td.highlight {
  background-color: green;
}

在 html 中：-

<table>
    <tr *ngFor="let company of investTable; let i = index">
      <td>
       {{company.price}}
      </td>
      <td [ngClass]="{'highlight': company.profit > 0}">
       {{company.profit}}
      </td>
    </tr>
  </table>