以角度突出显示所选行的问题

Question

我设计了一个自定义网格，我想突出显示选择的行，但它不起作用。我无法弄清楚为什么会发生这种情况。下面是自定义网格的部分，其中我添加了突出显示的类以及选择行的条件。

//这是html。 逻辑是这样的：

<tbody>
  <tr *ngFor="let row of data; let i = index" (click)="onRowClick(i, row)" [class.highlighted]="selectedRowIndex === i">
    <th scope="row" *ngIf="showCheckboxColumn">
      <input type="checkbox" [checked]="row.selected" (change)="toggleCheckbox(row)" />
    </th>
    <td *ngFor="let column of columns">{{ row[column.key] }}</td>
  </tr>
</tbody>

我想突出显示所选行。

TS：

onRowClick(rowIndex: number, row: any ) {
  this.selectedRowIndex = rowIndex;
  this.selectRow.emit(row);
  this.cdr.detectChanges();
  console.log(this.selectedRowIndex);
}

CSS：

.highlight {
  background-color: #8b2323;
}

Answer 1

您能否更新一下您的 HTML 代码和 CSS 代码类名称都是不同的！

<tbody>
  <tr *ngFor="let row of data; let i = index" (click)="onRowClick(i, row)" [class.highlighted]="selectedRowIndex === i">
    <th scope="row" *ngIf="showCheckboxColumn">
      <input type="checkbox" [checked]="row.selected" (change)="toggleCheckbox(row)" />
    </th>
    <td *ngFor="let column of columns">{{ row[column.key] }}</td>
  </tr>
</tbody>

初始化组件中的 selectedRowIndex 变量。它最初应设置为 -1 或默认值，表示未选择任何行。

selectedRowIndex = -1; // Initialize with -1 to indicate no selection

onRowClick(index: number, row: any) {
  console.log(index);
  this.selectedRowIndex = index;
  console.log(selectedRowIndex);
  // Additional logic if needed
}

我在 onRowClick 方法中添加了 console.log 语句来检查它是否被触发。

.highlighted {
  background-color: yellow; /* or any other highlighting style */
}