可调整大小的Angular Material弹窗内ag-grid-angular表格自适应尺寸问题

问题原因 #

ag-grid 默认不会主动监听父容器的尺寸变化，弹窗拖动调整大小时没有触发ag-grid的重绘逻辑，所以出现尺寸不同步的问题。

修复步骤 #

1. 调整CSS样式 #

先确保各层级容器的宽高可以跟随弹窗自适应：

/* 若要避免影响其他弹窗，建议打开弹窗时指定自定义panelClass，这里用自定义类名限定样式范围 */
::ng-deep .resizable-dialog .mat-dialog-container {
  resize: both;
  overflow: auto;
  /* 可自定义最小宽高，防止弹窗缩到过小影响使用 */
  min-width: 400px;
  min-height: 300px;
}

.agTable {
  width: 100%;
  /* 高度减去头部标题、底部按钮的总高度，根据你的实际布局调整数值即可 */
  height: calc(100% - 80px);
}

/* ag-grid容器需要占满父级 */
.zebra {
  width: 100%;
  height: 100%;
}

打开弹窗时添加自定义panelClass的示例：

this.dialog.open(你的弹窗组件类名, {
  panelClass: 'resizable-dialog',
  // 其他弹窗配置如宽高、数据传参等
})

2. 组件TS逻辑修改 #

首先保存ag-grid的实例API，再监听弹窗的尺寸变化主动触发ag-grid重绘：

import { MatDialogRef } from '@angular/material/dialog';

// 组件类内部
private gridApi: any;

constructor(public dialogRef: MatDialogRef<你的弹窗组件类名>) {}

gridReady(params: any) {
  this.gridApi = params.api;
  // 初始化时适配一次列宽
  this.gridApi.sizeColumnsToFit();
}

ngAfterViewInit() {
  const dialogContainer = document.querySelector('.resizable-dialog .mat-dialog-container');
  if (!dialogContainer || !this.gridApi) return;

  // 用ResizeObserver精准监听弹窗尺寸变化
  const resizeObserver = new ResizeObserver(() => {
    // 适配列宽
    this.gridApi.sizeColumnsToFit();
    // 若需要同步适配行高可打开下面注释
    // this.gridApi.resetRowHeights();
  });

  resizeObserver.observe(dialogContainer);
  // 弹窗关闭时销毁监听避免内存泄漏
  this.dialogRef.afterClosed().subscribe(() => {
    resizeObserver.unobserve(dialogContainer);
  });
}

可选优化 #

如果你的setColumnWidth方法中已经包含了sizeColumnsToFit的相关逻辑，保留原有的(gridSizeChanged)绑定即可，不需要额外修改。

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