Angular中mat-dialog在mat-grid内显示异常，受rowHeight影响

问题背景 #

在json-form组件中，使用Angular Material的mat-grid-list构建网格布局时，嵌入的Dialog类组件（如app-off-canvas）显示效果受rowHeight属性影响，出现异常显示问题。

问题分析 #

1. 布局层级约束：Dialog类组件被嵌套在mat-grid-list容器内部，当rowHeight设置为比例值（如3:4）时，网格行被强制按固定宽高比渲染，Dialog的布局会被容器的高度限制裁剪。
2. 容器规则冲突：mat-grid-list被包裹在<table>标签中，表格布局与网格布局的渲染规则冲突，干扰了网格的高度计算，间接影响Dialog的正常显示。
3. 响应式逻辑缺失：detectBreakpoint仅定义了小屏幕下的rowHeight值，未设置大屏幕的默认值，导致不同尺寸下布局一致性缺失。

解决方案 #

方案1：将Dialog类组件移出网格布局容器 #

Dialog属于全局弹窗组件，应脱离网格布局的约束，放置在组件根层级：

<!-- 弹窗组件放在最外层，不受网格布局影响 -->
<ng-container *ngFor="let widget of containerList">
  <ng-container *ngIf="widget.widgetType.name === widgetTypeEnum.offCanvas.name">
    <app-off-canvas [data]="widget.container"
                    data-kt-drawer-close="#kt_drawer_example_basic_close"
                    data-kt-drawer-toggle="#kt_drawer_example_basic_button">
    </app-off-canvas>
  </ng-container>
  <ng-container *ngIf="widget.widgetType.name === widgetTypeEnum.crud.name">
    <app-crud-template [data]="widget.container"></app-crud-template>
  </ng-container>
</ng-container>

<!-- 仅保留网格布局用于排列常规组件 -->
<div class="table-responsive">
  <!-- 移除冲突的table标签 -->
  <mat-grid-list gutterSize="15px" cols="12" [rowHeight]="rowHeight">
    <ng-container *ngFor="let widget of containerList">
      <ng-container *ngIf="widget.widgetType.name === widgetTypeEnum.form.name">
        <app-form-widget [data]="widget.container"></app-form-widget>
      </ng-container>
      <ng-container *ngIf="widget.widgetType.name === widgetTypeEnum.table.name">
        <mat-grid-tile [colspan]="widget.cols ? widget.cols : 12"
                       [rowspan]="widget.rows ? widget.rows : 6">
          <mat-grid-list gutterSize="0" cols="12">
            <app-table-widget [data]="widget.container"></app-table-widget>
          </mat-grid-list>
        </mat-grid-tile>
      </ng-container>
      <ng-container *ngIf="widget.widgetType.name === widgetTypeEnum.tab.name">
        <mat-grid-tile [colspan]="widget.cols ? widget.cols : 12"
                       [rowspan]="widget.rows ? widget.rows : 6">
          <mat-grid-list cols="12">
            <app-tab-widget [data]="widget.container"></app-tab-widget>
          </mat-grid-list>
        </mat-grid-tile>
      </ng-container>
      <ng-container *ngIf="widget.widgetType.name === widgetTypeEnum.tree.name">
        <mat-grid-tile [colspan]="widget.cols ? widget.cols : 12"
                       [rowspan]="widget.rows ? widget.rows : 6">
          <mat-grid-list cols="12">
            <app-tree-widget [data]="widget.container"></app-tree-widget>
          </mat-grid-list>
        </mat-grid-tile>
      </ng-container>
    </ng-container>
  </mat-grid-list>
</div>

方案2：修改rowHeight为自适应值 #

将rowHeight设置为'fit'（自适应内容高度）或固定像素值，避免强制比例限制：

export class AppJsonFormComponent implements OnInit {
  widgetTypeEnum = new WidgetTypeModel()
  responsive = true;
  @Input() containerList: AppContainerModel[];
  rowHeight: any = 'fit'; // 默认自适应

  constructor(private breakpointObserver: BreakpointObserver) {
    if (this.containerList && this.containerList.length > 0) {
      this.makeGroup();
    }
  }

  ngOnInit() {
    this.detectBreakpoint();
  }

  // ...其他方法

  private detectBreakpoint(): void {
    this.breakpointObserver.observe(['(max-width: 500px)']).subscribe(result => {
      // 小屏幕可根据需求调整，比如固定高度或保持自适应
      this.rowHeight = result.matches ? 'fit' : 'fit';
      // 示例：小屏幕设置固定高度
      // this.rowHeight = result.matches ? '350px' : 'fit';
    });
  }
}

方案3：移除冲突的table容器 #

<table>标签与mat-grid-list的网格布局规则冲突，直接移除该标签：

<div class="table-responsive">
  <!-- 移除<table class="table table-rounded"> -->
  <mat-grid-list gutterSize="15px" cols="12" [rowHeight]="rowHeight">
    <!-- 内部内容保持不变 -->
  </mat-grid-list>
</div>

内容的提问来源于stack exchange，提问作者MohammadEbrahimi