Angular 12项目中Angular Slick Grid未渲染CSS导致数据堆叠如何解决？

解决步骤 #

你遇到的是Angular SlickGrid典型的样式未正确加载/初始化异常问题，按以下顺序排查即可解决：

• 确认angular.json样式引入正确
  你需要在angular.json的projects -> 你的项目名 -> architect -> build -> options -> styles数组中添加以下3个样式文件，注意不要加到test节点的styles下：

  "styles": [
    "node_modules/angular-slickgrid/lib/styles/css/slick.grid.css",
    "node_modules/angular-slickgrid/lib/styles/css/slick-theme.css",
    "node_modules/angular-slickgrid/lib/styles/angular-slickgrid.css",
    "src/styles.css"
  ]
  

  修改完配置后必须重启ng serve才会生效。
• 给表格父容器设置固定高度
  SlickGrid依赖父容器的明确宽高计算布局，你代码中的.container类需要添加宽高样式，在全局styles.css或者对应组件的css中添加：

  .container {
    height: 600px;
    width: 100%;
  }
  

• 检查版本兼容性
  Angular 12仅适配3.x版本的Angular SlickGrid，如果你安装了4.x及以上版本（适配Angular 14+），会出现样式不兼容问题。执行以下命令安装对应版本即可：

  npm install angular-slickgrid@3.x
  

• 排查全局样式冲突
  若以上步骤都无效，按F12打开浏览器调试工具，选中表格单元格查看元素样式，确认是否有全局的div、table通用样式覆盖了SlickGrid的内置样式，如有冲突调整全局样式优先级即可。

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