在 angular 中突出显示所选行的问题-解网

问：

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

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

角度行选择突出显示 onrowclick

<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 */
}

试试这个 <tbody> <tr *ngFor=“let row of data;let i = index“ （click）=”onRowClick（i， row）“ [class..highlight]=“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>

上一个：Flutter 多个下拉问题

下一个：我想在 R 中计算我有多少行根本没有 0 值

在 angular 中突出显示所选行的问题

Issue with highlighting the selected row in angular

评论

评论