ag-grid 的入门演示 - 未按预期显示网格

Question

我正在尝试为我的 Angular 6 应用程序处理“ag-grid”Typescript 网格组件。

该网站看起来很有前途，我一直在尝试让他们的“入门”演示在我的机器上运行 - 到目前为止没有任何运气。

我已经完成了设置步骤——有一个例外：我尝试使用“直接”CSS（而不是使用 SCSS）——因此我在我的 app.component.ts 中有这个：

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css',
              '../../node_modules/ag-grid-community/dist/styles/ag-grid.css',
              '../../node_modules/ag-grid-community/dist/styles/ag-theme-balham.css',
             ]
})

而不是他们在 styles.scss 文件中导入 CSS 的方法：

@import "~ag-grid-community/dist/styles/ag-grid.css";
@import "~ag-grid-community/dist/styles/ag-theme-balham.css";

不确定，这是否是问题的根本原因 - 但我的数据在屏幕上显示非常乱码，根本不在网格中......（在 Chrome 和 Edge 中尝试过 - 结果相同）：

Answer 1

您应该将样式添加到您的 angular.json 文件中：

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

参见stackblitz 演示。

Answer 2

今天我忘记将父级div 中的ag-theme-alpine 替换为ag-theme-balham。