Question

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

我曾尝试在SO上理解不同的解决方案，但最终无法使其工作。这是发生的事情：我单击一行，将其突出显示。如果然后我单击第2行，它将取消突出显示第一个。但是，如果我单击第3行，它将同时突出显示2和3。如果单击4，将仅突出显示2和4，而3将不突出显示。代码atm。

这是我的TypeScript： public changeTableRowColor(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>

解决方案：

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

我希望的是：我可以突出显示多行，并通过单击将其突出显示。

编辑：发布解决方案

Answer 1

只需在changeTableRowColor中添加一个条件：

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

如果当前单击的rowId等于先前单击的行ID，则这会将rowClicked设置为-1。

这里有个工作Sample StackBlitz供您参考。

Answer 2

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

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

Answer 3

您可以添加[ngClass] = {'classToApply'：clicked === index}并加上（click）=“ step = index;'”

类似的东西：

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

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

3 个答案: