4

我将 Angular 5 与 ag-grid 17.x 一起使用，并且只是尝试做一个简单的“hello world”类型的示例，但无法正确显示网格。我的模板中有以下 HTML：

<div style="width: 800px; height: 500px" class="ag-theme-balham">
  <ag-grid-angular
                   [rowData]="rowData"
                   [columnDefs]="columnDefs">
  </ag-grid-angular>
</div>

...而且我没有收到任何错误，但它不是网格，而是呈现为一个混乱的文本列。

无论如何，我在开发工具中注意到网格指向的样式不存在，所以我将它们导入到 .angular-cli.json 中：

  "styles": [
    "scss/styles.scss",
    "../node_modules/ag-grid/dist/styles/ag-grid.css",
    "../node_modules/ag-grid/dist/styles/ag-theme-balhom.css"
  ],

...这行得通，但解决方案对我来说似乎不合适。我试图将它们导入我的一个 .scss 文件中：

@import '~ag-grid/src/styles/ag-grid.scss';
@import '~ag-grid/src/styles/ag-theme-fresh.scss';

...但有一堆参考错误（找不到图标等）。

我的问题是如何将 ag-grid 样式和主题导入 Angular 应用程序？我在文档中四处寻找，但似乎找不到我偶然发现的解决方案，所以假设它是错误的......但也找不到任何有效的方法。谢谢你的帮助！在此处输入图像描述

4

1 回答 1

3

@koolhuman 提供的链接是正确的，我想在此基础上添加两点。

  1. 您应该将styles.scss文件引用保留在文件中的最后一个styles数组中.angular-cli.json。styles.scss如果您保留之前的样式，您想要覆盖的 ag-grid 样式将被覆盖ag-grid。

  2. 在你的元素上添加class="ag-theme-balhom"或。简而言之，无论您想应用哪个主题。class="ag-theme-fresh"<ag-grid-angular>

于 2018-04-05T06:28:27.820 回答