如何使用 Angular 7 更改包含不同值的行的颜色？

Question

如何使用 Angular 7 为具有不同值的行赋予红色？

我试图为 HTML table 中同一行具有不同值的行设置红色。如果同一行上的每个 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

不要将 jQuery 与 Angular 一起使用（至少对于 DOM 操作）
在 Angular 中进行条件样式设置的方法是使用 class 指令

这是您执行此类任务时应熟悉的技术的粗略演示：

<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;
}

你的风格sheet:

.red-row {
  color: red;
}

如何使用 Angular 7 更改包含不同值的行的颜色？

How to change color of row that contains different value using Angular 7?

javascript

jquery

angular

angular7