有条件地更改表格数据的颜色Angular 2+

getCellStyles(value: number): any {
  if (value > 10) {
    return { 'background-color': 'red' };
  } else if (value > 5) {
    return { 'background-color': 'yellow' };
  } else {
    return { 'background-color': 'green' };
  }
}

<table>
  <tr>
    <th>数据</th>
    <th>颜色</th>
  </tr>
  <tr *ngFor="let item of data">
    <td>{{ item.value }}</td>
    <td [ngStyle]="getCellStyles(item.value)">{{ item.color }}</td>
  </tr>
</table>

getCellClass(value: number): string {
  if (value > 10) {
    return 'red-cell';
  } else if (value > 5) {
    return 'yellow-cell';
  } else {
    return 'green-cell';
  }
}

<table>
  <tr>
    <th>数据</th>
    <th>颜色</th>
  </tr>
  <tr *ngFor="let item of data">
    <td>{{ item.value }}</td>
    <td [ngClass]="getCellClass(item.value)">{{ item.color }}</td>
  </tr>
</table>

<table>
  <tr>
    <th>数据</th>
    <th>颜色</th>
  </tr>
  <tr *ngFor="let item of data">
    <td>{{ item.value }}</td>
    <td [style.background-color]="item.value > 10 ? 'red' : (item.value > 5 ? 'yellow' : 'green')">{{ item.color }}</td>
  </tr>
</table>