Как оформить отдельные строки таблицы данных углового материала?

Question

Я хочу оформить отдельные строки таблицы данных на основе некоторых значений json.

Например, если конкретная строка имеет значение температура > 30, мне нужно раскраситьэтот ряд как красный.Если это от 30 до 50, цвет должен быть зеленым.В противном случае цвет должен быть зеленым.

На данный момент я могу ориентироваться только на четные или нечетные строки, используя:

tr:nth-child(even)/tr:nth-child(odd).

Answer 1

Вы должны иметь возможность добавлять классы CSS непосредственно к элементам строки:

<tr mat-row *matRowDef="let row; columns: displayedColumns;"
    class="temperature-row"
    [ngClass]="{'high': row.temperature > 30}">
</tr>

Затем вы можете использовать классы для стилизации строк по своему усмотрению:

.temperature-row {
    background-color: green;
}

.temperature-row.high {
    background-color: red;
}

Answer 2

Мне нравится стилизовать строки таблицы, используя этот шаблон:

  <tr *ngFor="let temperature of temperatures"
                [ngClass]="{'green' : temperature.value == 10, 'orange' : temperature.value == 20, 'red' : temperature.value == 30}">
              <td>{{temperature.value}}</td>
  </tr>

И я определяю свои цвета или любые другие стили для этих строк в CSS следующим образом:

.red{
   color: red;
}
.orange{
    color: orange;
}
.green{
   color: green;
}