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',
             ]
})

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

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

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

Answer 1

You should add the styles to your angular.json file:

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

See stackblitz demo.