问题描述
我正在将Angular 5与ag-grid 17.x一起使用,并且只是尝试做一个简单的 hello world类型的示例,但无法使网格正确显示。我的模板中包含以下HTML:
I'm using Angular 5 with ag-grid 17.x and am just trying to do a simple, "hello world"-type example, but having trouble getting the grid to display appropriately. I have the following HTML in my template:
<div style="width: 800px; height: 500px" class="ag-theme-balham">
<ag-grid-angular
[rowData]="rowData"
[columnDefs]="columnDefs">
</ag-grid-angular>
</div>
...而且我没有得到任何错误,但是它只是呈现了网格而不是网格
...and I don't get any errors, but instead of a grid, it's just rendered as one jumbled column of text.
无论如何,我在开发工具中注意到网格所指向的样式不存在,所以我将它们导入了。 angular-cli.json:
Anyway, I noticed in dev tools that the styles that the grid was pointing to weren't there, so I imported them in the .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文件之一中:
...and this worked, but the solution doesn't seem right to me. I tried to import them in one of my .scss files:
@import '~ag-grid/src/styles/ag-grid.scss';
@import '~ag-grid/src/styles/ag-theme-fresh.scss';
...但是出现了很多参考错误(找不到图标等)。
...but got a bunch of reference errors (couldn't find icons, etc.).
我的问题是应如何将农业网格样式和主题导入Angular应用程序?我已经在文档中进行了深入研究,但是似乎找不到我偶然发现的解决方案,因此假设它是错误的...但是也找不到任何可行的解决方案。感谢您的帮助!
My question is how should ag-grid styles and themes be imported into an Angular application? I've dug around in the documentation, but can't seem to find the solution that I stumbled upon, so assume it's wrong...but can't find anything that works either. Thanks for any help!
推荐答案
@koolhuman提供的链接是正确的,我想在此之上添加两点。
The link @koolhuman has provided is correct, I would like to add two points on top of that.
-
您应该最后将
styles
数组中的styles.scss
文件引用保留在.angular-cli.json
文件。如果在ag-grid
样式之前保留styles.scss
,则要覆盖的ag-grid样式将被覆盖。
You should keep your
styles.scss
file reference at the last instyles
array in.angular-cli.json
file. The ag-grid styles you want to override will be overridden if you keepstyles.scss
beforeag-grid
styles.
添加 class = ag-theme-balhom
或 class =
。 简而言之,无论您要应用哪个主题。 < ag-grid-angular>
元素上的 ag-theme-fresh
Add class="ag-theme-balhom"
or class="ag-theme-fresh"
on you <ag-grid-angular>
element. In short, whichever theme you want to apply.
这篇关于如何为Angular 5包含农业网格样式?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!