Angular11项目中AG-GRID表格内容全部渲染至同一列问题求助

核心原因排查 #

• 1. 缺失AG-GRID核心样式引入
     这是该问题最高发的诱因，Angular项目未正确引入AG-GRID的基础样式和主题样式，会导致表格布局完全失效。
     检查angular.json的build.options.styles数组，确认是否添加了以下配置：

  "styles": [
    "node_modules/ag-grid-community/dist/styles/ag-grid.css",
    "node_modules/ag-grid-community/dist/styles/ag-theme-alpine.css",
    "src/styles.css"
  ]
  

  如果你用的是AG-GRID企业版，对应路径替换为ag-grid-enterprise即可。
• 2. 表格容器未指定正确的class和宽高
     检查模板中的AG-GRID标签，必须同时指定ag-theme-xxx主题class，且给容器设置固定宽高：

  <ag-grid-angular 
    style="width: 100%; height: 500px;" 
    class="ag-theme-alpine"
    [rowData]="rowData" 
    [columnDefs]="columnDefs">
  </ag-grid-angular>
  

  没有指定主题class的情况下，表格的列布局样式不会生效。
• 3. 列定义配置错误
     确认columnDefs每个配置项的field属性和rowData的字段名完全匹配，没有拼写错误，同时没有设置错误的width/flex属性导致所有列宽度为0。
     示例正确配置参考：

  columnDefs = [
    { field: 'make' },
    { field: 'model' },
    { field: 'price' }
  ];
  
  rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxster', price: 72000 }
  ];
  

• 4. 版本兼容性问题
     Angular 11对应的AG-GRID推荐版本为25.x~27.x，过高的AG-GRID版本（28+）不再支持Angular 11，会出现兼容性异常。可以执行以下命令安装适配版本：

  npm install ag-grid-community@27.3.0 ag-grid-angular@27.3.0
  

验证步骤 #

修改配置后执行ng serve --open重启开发服务，清除浏览器缓存后再验证表格渲染效果。

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