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>

我怎样才能使表格单元格根据单元格值的不同而有不同的背景色呢？ 比如说，如果公司利润是正值，就把它变成绿色。

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>

Answer 2

你可以在你的html中加入这个。

<td [style.positive]="company.profit > 0">

在你的css中加入这个。

td.positive{
  background-color: green;
}

Answer 3

看看 ngStyle 和 ngClass. 最简单的使用方法是直接绑定到 style 财产。

<table>
  <tr *ngFor="let company of investTable; let i = index">
    <td>
      {{company.name}}
    </td>
    <td>
      {{company.price}}
    </td>
    <td [style.background-color]="company?.profit > 5 ? 'green' : 'red'">
      {{company.profit}}
    </td>
  </tr>
</table>