Angular подсветка строк таблицы матов при открытом диалоге

Question

Требуется, чтобы строка была выделена, пока открыто диалоговое окно. Не уверены, какая из лучших реализаций будет состоять в том, чтобы поддерживать активное состояние нажатой строки при открытии диалогового окна, щелкая строку

Таблица HTML:

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

Таблица S CSS Стиль:

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

Вы можете посетить Диалог материалов и Таблица материалов