角垫表行突出显示对话框打开答案

【问题标题】：Angular mat-table row highlighting with dialog open角垫表行突出显示对话框打开
【发布时间】：2020-02-28 23:53:42
【问题描述】：

要求是在对话框打开时保持行突出显示。不确定当通过单击行打开对话框时保持行单击活动状态的最佳实现是什么

表格 HTML：

<mat-table class="mat-table-hover mat-table-striped mat-table-active" [dataSource]="dataSource" matSort>

表格 SCSS 样式：

// Table highlight rows on active
    &.mat-table-active > mat-row:active {
      background-color: mat-color($accent, lighter);
      cursor: pointer;

      mat-cell {
        color: mat-color($accent, lighter-contrast);
      }
    }

【问题讨论】：

如果我理解正确的话，你只需要在用户点击一行时设置一个active 类（带有一个变量）。然后，在关闭对话框后，您重置变量。
@Emilien 能否提供代码示例

标签： angular sass angular-material2 mat-table

【解决方案1】：

如果你尝试这样的事情会怎样：

activatedRow = null;
displayedColumns: string[] = [/* Your columns here as strings */];

constructor(private dialog: MatDialog) {}

openDialog(row: any) {
  this.activatedRow = row;

  this.dialog.open(YourComponent, {
    width: '250px',
    data: {}
  }).afterclosed().pipe(
    tap(() => this.activatedRow = null)
  );
}

<mat-table class="mat-table-hover mat-table-striped mat-table-active" [dataSource]="dataSource" matSort>

  <!-- Put your columns here -->

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row [class.active]="activatedRow === row" (click)="openDialog(row)" *matRowDef="let row; columns: displayedColumns;"></tr>
</mat-table>

您可以访问Material Dialog和Material Table

【讨论】：

是的，酷！如果可以，您能否将我的答案标记为“解决”？ :)
@Emillien 刚刚做到了！ :) 你能投票吗？
@Halfpenny 完成！