Angular自定义表格选中行高亮功能失效求助

核心问题：类名不匹配 #

你代码里的HTML绑定的是highlighted类，但CSS定义的是highlight类，两者名称不一致，这是高亮不生效的直接原因。

两种修改方式二选一即可：

1. 修改CSS类名，和HTML绑定保持一致：

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

2. 修改HTML里的类绑定，匹配现有CSS：

<tr *ngFor="let row of data; let i = index" (click)="onRowClick(i, row)" [class.highlight]="selectedRowIndex === i">

额外排查点（若修改类名后仍失效） #

• 确认selectedRowIndex初始化正确：在组件类里必须声明并初始化该变量，示例：

  selectedRowIndex: number = -1; // 初始值设为-1表示无默认选中行
  

• 检查样式优先级：如果表格行自带的背景样式优先级更高，可使用更具体的选择器提升优先级：

  tbody tr.highlighted {
    background-color: #8b2323;
  }
  

• 验证点击事件触发情况：查看浏览器控制台是否输出了正确的selectedRowIndex值，确认onRowClick方法被正常调用且变量赋值正确。
• 变更检测策略适配：若组件使用ChangeDetectionStrategy.OnPush，当前代码里的cdr.detectChanges()已经处理了变更检测触发问题，无需额外调整。

内容的提问来源于stack exchange，提问作者Kshitij Chaudhary