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

Question

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

该网站看起来很有前途，我一直在努力让他们的 "Getting Started" 演示在我的机器上运行 - 到目前为止没有任何运气。

我已经完成了设置步骤——有一个例外：我尝试使用 "straight" 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。

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

Getting Started demo for ag-grid - not showing grid as expected

ag-grid

angular