Html 如何在Angular/TypeScript中切换*ngFor中行的背景色？

我是使用Angular 6的初学者。我想在单击表格行时更改其背景色，在重新单击时，将其设置回原始颜色

我一直试图理解不同的解决方案，但最终还是无法奏效。 结果如下：我点击一行，它会高亮显示。如果单击第2行，它将取消第一行的高亮显示。但如果我单击第3行，它将同时突出显示2和3。如果我点击4，只有2和4会高亮显示，3会不高亮显示。。。因此，只有不均匀数字上的行可以用代码atm突出显示。

这是我的打字稿：

publicChangeTableRowColor（idx:any）{this.rowClicked=idx；}

这是我的HTML：

<tr *ngFor="let ApiDataFile of filteredApiDataFiles; let idx=index; let even=even"
    [style.background-color]="rowClicked == idx ? 'yellow' : (even ? '#ffffff' : 'f1f1f1')"
    (click)="changeTableRowColor(idx)">
  <td>{{ ApiDataFile.name }}</td>
  <td>{{ ApiDataFile.surname }}</td>
</tr>

{{apidatfile.name}
{{apidatfile.names}

---

解决方案：

  <tr *ngFor="let ApiDataFile of filteredApiDataFiles; let idx=index; let even=even"
  [style.background-color]="ApiDataFile.rowClicked ? 'yellow' : (even ? '#ffffff' : '#f1f1f1')"
  (click)="ApiDataFile.rowClicked = !ApiDataFile.rowClicked">
  <td>{{ ApiDataFile.name }}</td>
  <td>{{ ApiDataFile.surname }}</td>
</tr>

{{apidatfile.name}
{{apidatfile.names}

我期望的是：我可以高亮显示多行，并通过单击取消高亮显示

---

编辑：发布解决方案

只需在

changeTableRowColor

中添加一个条件：

changeTableRowColor(idx: any) { 
  if(this.rowClicked === idx) this.rowClicked = -1;
  else this.rowClicked = idx;
}

如果当前单击的行id等于先前单击的行id，则将

rowcalicked

设置为-1

这是你的裁判的工作报告

---

只需在

changeTableRowColor

中添加一个条件：

changeTableRowColor(idx: any) { 
  if(this.rowClicked === idx) this.rowClicked = -1;
  else this.rowClicked = idx;
}

如果当前单击的行id等于先前单击的行id，则将

rowcalicked

设置为-1

这是你的裁判的工作报告

---

您可以在对象中放置虚拟属性，并在单击时对其进行处理

<tr *ngFor="let ApiDataFile of filteredApiDataFiles; let idx=index; let even=even"
    [style.background-color]="ApiDataFile.rowClicked ? 'yellow' : (even ? 'red' : 'green')"
    (click)="ApiDataFile.rowClicked = !ApiDataFile.rowClicked">
      <td>{{ ApiDataFile.name }}</td>
      <td>{{ ApiDataFile.surname }}</td>
    </tr>

{{apidatfile.name}
{{apidatfile.names}

您可以在对象中放置虚拟属性，并在单击时对其进行处理

<tr *ngFor="let ApiDataFile of filteredApiDataFiles; let idx=index; let even=even"
    [style.background-color]="ApiDataFile.rowClicked ? 'yellow' : (even ? 'red' : 'green')"
    (click)="ApiDataFile.rowClicked = !ApiDataFile.rowClicked">
      <td>{{ ApiDataFile.name }}</td>
      <td>{{ ApiDataFile.surname }}</td>
    </tr>

{{apidatfile.name}
{{apidatfile.names}

您可以将[ngClass]={'classToApply'：clicked===index}与（click）=“step=index；”一起添加

比如：

<li [ngClass]="{classToApply: clicked===index}"(click)="step=index;">Data</li>

数据

您可以将[ngClass]={'classToApply'：clicked===index}与（click）=“step=index；”一起添加

比如：

<li [ngClass]="{classToApply: clicked===index}"(click)="step=index;">Data</li>

数据

您好，谢谢您抽出时间。添加此行后，当我单击该行时，该行不再高亮显示。在我之前的代码中，会发生这样的情况：我单击一行，它会高亮显示它。如果单击第2行，它将取消第一行的高亮显示。但如果我单击第3行，它将同时突出显示2和3。如果我点击4，只有2和4会高亮显示，3会不高亮显示。。。所以只能突出显示不均匀数字上的行。奇怪。你能检查一下StackBlitz的工作样本吗？对我来说，这很好。我似乎无法让它工作，但你的解决方案与帕什瓦的非常相似，所以这可能是我方面的误解。谢谢你的帮助，朋友你好，谢谢你的时间。添加此行后，当我单击该行时，该行不再高亮显示。在我之前的代码中，会发生这样的情况：我单击一行，它会高亮显示它。如果单击第2行，它将取消第一行的高亮显示。但如果我单击第3行，它将同时突出显示2和3。如果我点击4，只有2和4会高亮显示，3会不高亮显示。。。所以只能突出显示不均匀数字上的行。奇怪。你能检查一下StackBlitz的工作样本吗？对我来说，这很好。我似乎无法让它工作，但你的解决方案与帕什瓦的非常相似，所以这可能是我方面的误解。谢谢你的帮助，伙计