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

查看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>

Answer 3

您可以将其添加到html中：

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

并将其发送到您的CSS：

td.positive{
  background-color: green;
}

CSS td条件背景颜色设置

3 个答案: