Angular 12集成Ag-Grid渲染异常：表格初始高度为0px求助

问题原因 #

你给ag-grid-angular设置了style="width: 100%; height: 100%"，但父容器container-fluid没有设置明确的高度值。CSS中百分比高度需要依赖父元素的高度作为参照，当父元素高度为auto时，子元素的100%高度无法计算出实际值，最终导致表格渲染高度为0px。

解决方法 #

• 给父容器设置明确高度
  修改container-fluid的样式，添加具体高度值，比如占满视口高度：

  <div class="container-fluid" style="height: 100vh;">
      <ag-grid-angular 
          (cellClicked)="onCellClicked($event)"
          (gridReady)="onGridReady($event)"
          [animateRows]="true"
          [columnDefs]="columnDefs"
          [defaultColDef]="defaultColDef"
          [rowData]="rowData$ | async"
          [rowSelection]="'multiple'"
          style="width: 100%; height: 100%"
      ></ag-grid-angular>
  </div>
  

  如果页面有导航栏等其他元素，可通过calc调整高度：

  .container-fluid {
      height: calc(100vh - 80px); /* 80px为导航栏高度，按需修改 */
  }
  

• 直接给Ag-Grid设置固定/最小高度
  不依赖父容器高度，直接给表格设置固定高度：

  <ag-grid-angular 
      (cellClicked)="onCellClicked($event)"
      (gridReady)="onGridReady($event)"
      [animateRows]="true"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [rowData]="rowData$ | async"
      [rowSelection]="'multiple'"
      style="width: 100%; height: 600px;"
  ></ag-grid-angular>
  

  或者设置最小高度确保表格至少有显示空间：

  <ag-grid-angular 
      (cellClicked)="onCellClicked($event)"
      (gridReady)="onGridReady($event)"
      [animateRows]="true"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [rowData]="rowData$ | async"
      [rowSelection]="'multiple'"
      style="width: 100%; min-height: 500px;"
  ></ag-grid-angular>
  

• 使用Ag-Grid的domLayout属性自适应高度
  启用autoHeight模式，表格会根据行数据自动计算高度，无需手动设置height：

  <ag-grid-angular 
      (cellClicked)="onCellClicked($event)"
      (gridReady)="onGridReady($event)"
      [animateRows]="true"
      [columnDefs]="columnDefs"
      [defaultColDef]="defaultColDef"
      [rowData]="rowData$ | async"
      [rowSelection]="'multiple'"
      [domLayout]="'autoHeight'"
      style="width: 100%;"
  ></ag-grid-angular>
  

内容的提问来源于stack exchange，提问作者Sébastien Hardeman