Angular 9 使用 mat-table multiTemplateDataRows 并希望同时悬停/鼠标悬停在两行上

【问题标题】：Angular 9 using mat-table multiTemplateDataRows and want to hover/mouseover both rows at the same timeAngular 9 使用 mat-table multiTemplateDataRows 并希望同时悬停/鼠标悬停在两行上
【发布时间】：2020-11-12 00:15:05
【问题描述】：

我是 angular 新手，正在使用带有 multiTemplateDataRows 的 mat-table。因此，我的 DataSource 中的每个元素都打印在表格的两行上。两行始终可见。我的问题是当我将鼠标悬停在第 1 行时，仅突出显示第 1 行。而且，如果我将鼠标悬停在第 2 行上，则仅突出显示第 2 行。但是，我需要两行同时突出显示。有没有办法将两行分组以用于悬停/突出显示？

这是我定义行的方式：

<tr mat-header-row *matHeader="displayedColumns; sticky:true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;" class="first-row" (click)="eventPopup(row)"></tr>
<tr mat-row *matRowDef="let row; columns: secondRowColumns;" class="second-row" (click)="eventPopup(row)"></tr>

感谢您的帮助！

【问题讨论】：

标签： css angular mat-table

【解决方案1】：

我终于让它工作了！

HTML 是：

<tr mat-header-row *matHeader="firstLineColumns; sticky:true"></tr>
<tr mat-row *matRowDef="let row; columns: firstLineColumns;" class="first-line" [ngClass] = "{'highlight': selectedId == row.eventId}" (mouseenter)="changeColor(row,true)" (mouseleave)="changeColor(row,false)" (click)="eventPopup(row)"></tr>
<tr mat-row *matRowDef="let row; columns: secondLineColumns;" class="second-line" [ngClass] = "{'highlight': selectedId == row.eventId}" (mouseenter)="changeColor(row,true)" (mouseleave)="changeColor(row,false)"  (click)="eventPopup(row)"></tr>

CSS：

.highlight {
background-color: yellow;
}

Javascript：

selectedId: string = null;

changeColor(row: Event, hover: true) {
  if (hover === true) {
    this.selectedId = row.eventId;
  }
  else {
    this.selectedId = null;
  }
}

【讨论】：