Angular mat-table 行突出显示并打开对话框

Question

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

Table HTML:

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

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

您可以访问Material Dialog and Material Table

Angular mat-table 行突出显示并打开对话框

Angular mat-table row highlighting with dialog open

sass

angular-material2

angular

mat-table