在打开对话框的情况下突出显示角表行

Question

要求是在对话框打开时使行高亮显示。不确定通过单击一行来打开对话框时保持行处于活动状态的最佳实现是什么

Table 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);
      }
    }

Answer 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>