Как изменить цвет фона строки таблицы на основе значения в ячейке таблицы?

Question

Я использую директиву Angular *ngFor для генерации динамической таблицы.Вот структура ниже:

       <tr *ngFor = 'let element of ph'>
            <td>{{element.timestamp}}</td>
            <td>{{element.ph}}</td>                   
       </tr>

Пример изображения сгенерированной таблицы показан ниже.

Я хочу раскрасить целые строки таблицы, содержащие 20

Answer 1

Вы можете просто использовать директиву NgClass в своем столбце ph.что-то вроде:

<td [ngClass]="{'first': true, 'second': true, 'third': false}">{{element.ph}}</td>

Другими словами, используйте определенный класс с определенными стилями, если ваше условие истинно.

Надеюсь, это поможет!

Answer 2

Вы можете использовать [ngClass], но [ngStyle] больше подходит для небольших изменений стиля:

<div [ngStyle]="{<property>: <value>}">

И для вашего конкретного случая:

<tr [ngStyle]="{'background-color': (20<ph && ph<50) ? 'red' : 'white'}">

Answer 3

Вы можете использовать [ngClass] и применять класс, если значения соответствуют вашим.

Здесь используйте это:

<table border="1">
  <thead>
    <td>Reading Time</td>
    <td>PH</td>
  </thead>
  <tbody>
    <tr *ngFor='let element of ph'
      [ngClass]="{'color': (element.ph > 20 && element.ph < 50)}">
      <td>{{element.timestamp}}</td>
      <td>{{element.ph}}</td>
    </tr>
  </tbody>
</table>

В качестве альтернативы, как предложено Йоэль Родригес , вы также можете использовать [class.color] для его динамического применения:

<table border="1">
  <thead>
    <td>Reading Time</td>
    <td>PH</td>
  </thead>
  <tbody>
    <tr *ngFor='let element of ph'
      [class.color]='element.ph > 20 && element.ph < 50'>
      <td>{{element.timestamp}}</td>
      <td>{{element.ph}}</td>
    </tr>
  </tbody>
</table>

А вот класс color css:

.color {
  color: white;
  font-weight: bold;
  background-color: red;
}

Пример StackBlitz

PS: Я не предлагаю подход [ngStyle], так как написание встроенных стилей не очень хорошая практика.