Как изменить цвет строки, содержащей другое значение, используя Angular 7?

Question

Как я могу дать красный цвет строке, которая имеет другое значение, используя Angular 7?

Я попытался дать красный цвет строке в таблице HTML, которая имеет разные значения в одной строке. Если каждый td в той же строке имеет разные значения от каждой ячейки позади, он выделит строке красный цвет шрифта. Я попробовал это с помощью jQuery, и он успешно запустился, но я не могу сделать это с помощью Angular 7. Как я могу это сделать?

$(document).ready(function() {
  MakeColorForDifferentContent();
});

function MakeColorForDifferentContent() {
  $("table tr").each((_, tr) => {
    var tempValue = $($(tr).find('td:first-child')).text();
    var tds = $(tr).find('td:not(:first-child)');
    var isDiff = false;
    
    tds.each((_, td) => {
      if ($(td).text() !== tempValue) {
        isDiff = true;
        return true;
      }
    });

    if (isDiff)
      $(tr).css('color', 'red');
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
  <col width="500">
  <col width="500">
  <col width="500">
  <col width="500">
  <tr bgcolor="#6699FF" width="100%">
    <th>Part1</th>
    <th>Part2</th>
    <th>Part3</th>
    <th>Part4</th>
    <tr>
      <td>12</td>
      <td>12</td>
      <td>12</td>
      <td>12</td>
    </tr>
    <tr>
      <td>12</td>
      <td>15</td>
      <td>12</td>
      <td>12</td>
    </tr>
    <tr>
      <td>17</td>
      <td>15</td>
      <td>12</td>
      <td>12</td>
    </tr>
</table>

Answer 1

1. Не используйте jQuery с Angular (по крайней мере, для манипулирования DOM)
2. Способ выполнения условного стиля в Angular - с помощью директивы класса

Это грубая демонстрация техник, с которыми вы должны быть знакомы для выполнения такого рода задач:

<table>
<tr *ngFor="let row of rows" [class.red-row]="isDiff(row)">
<td *ngFor="let cell of row">{{cell}}</td>
</tr>
</table>

В вашей машинописи:

rows: number[][];

ngOnInit(): void {
  this.rows = [
    [12, 12, 12, 12],
    [12, 15, 12, 12]
  ];
}

isDiff(row: number[]): boolean {
  const tempValue: number = row[0];
  for (let i = 1; i < row.length; i++) {
    if (tempValue !== row[i]) {
      return true;
    }
  }
  return false;
}

В вашей таблице стилей :

.red-row {
  color: red;
}