Angular 点击表格行预览按钮时修改行背景色的实现问题

你现在的代码存在两个核心问题：

1. 高亮类yellow绑定在了按钮元素上，只会改变按钮背景，不会作用于整行
2. preview方法中没有给判断条件用到的EditIndex变量赋值，判定条件永远不生效

可以按照下面的步骤修改即可实现需求： #

步骤1：修改表格行的绑定逻辑 #

找到你表格的<tr>标签，在循环渲染行时添加类绑定，这里推荐用行数据的唯一IDLabPeriodId做判断（比索引更稳定，不会受分页、排序操作影响）：

<!-- 原来的tr循环，注意你自己的ngFor变量名要对应上 -->
<tr 
  *ngFor="let row of yourTableDataList; let i = index"
  [ngClass]="{'highlight-yellow': selectedLabPeriodId === row.LabPeriodId}"
>
  <!-- 行内其他单元格 -->
  <td>
    <!-- 你的预览按钮，不需要给按钮绑类了 -->
    <button mat-icon-button class="sidebar-toggle" (click)="preview(row)">
      <mat-icon>pageview</mat-icon>
    </button>
  </td>
</tr>

步骤2：新增全局变量存储选中行标识，修改preview方法赋值 #

在TS文件的类中新增变量存储当前选中的行ID，并且在preview方法中赋值：

// 新增变量，存储当前选中预览的实验室周期ID
selectedLabPeriodId: number | null = null;

preview(labPeriod: ILabPeriod) {
  // 先赋值选中的ID，点击时立刻就能看到行高亮，不用等接口返回
  this.selectedLabPeriodId = labPeriod.LabPeriodId;

  this.labPeriodPreview = undefined;
  this._labService
      .getLabAnalysisTestResultsList(labPeriod.LabPeriodId)
      .subscribe((response: ILabConditionResult[]) => {
          this.labAnalysis.LabConditionResults = response;
          labPeriod.LabAnalysis = this.labAnalysis;
          this.labPeriodPreview = labPeriod;
          this._fuseSidebarService
              .getSidebar("analysis-detail-period-preview")
              .open();
      });
}

步骤3：添加高亮样式 #

在你的组件CSS文件中添加行高亮的样式，优先级不够的话可以加!important覆盖表格默认样式：

.highlight-yellow {
  background-color: #ffff00 !important;
}

如果你更习惯用索引判断，只需要做两处调整即可：

• 按钮点击事件传索引：(click)="preview(row, i)"
• preview方法接收索引并赋值给你的EditIndex变量：

  preview(labPeriod: ILabPeriod, index: number) {
    this.EditIndex = index;
    // 其余原有逻辑不变
  }
  

• 同时把tr上的类绑定改成[ngClass]="{'highlight-yellow': EditIndex === i}"即可。

内容的提问来源于stack exchange，提问作者Rocket Monkey