Angular Ag-Grid 无法正确显示
Posted
技术标签:
【中文标题】Angular Ag-Grid 无法正确显示【英文标题】：Angular Ag-Grid not displaying correctly 【发布时间】：2020-01-09 03:51:19 【问题描述】：我正在尝试在我的 Web 应用程序中使用 Angular Ag-Grid。
我已经学习了这些教程
Angular Grid | Get Started with ag-Grid
ag-Grid Angular Component
问题/问题 我完全按照每件事。甚至数据也被加载到网格中，但视图不是很明显。这是我得到的（不是对齐，没有着色）
我尝试了什么我在 Google 和 Stack Overflow 上进行了广泛的搜索。一些答案建议CSS 未正确加载（这是可靠的论点），但我仔细检查了Component.css 上的导入语句，并尝试在index.html 中添加.css 引用。我提到的.css 文件是存在的，参考也很好。
我的期望
代码
appComponent.html
<ag-grid-angular style="width: 500px; height: 500px;" class="ag-theme-balham" [rowData]="rowData"
[columnDefs]="columnDefs">
</ag-grid-angular>
appComponent.ts
import Component from '@angular/core';
import Grid from 'ag-grid/main';
@Component(
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
)
export class AppComponent
title = 'Grid1';
columnDefs = [
headerName: "Make", field: "make" ,
headerName: "Model", field: "model" ,
headerName: "Price", field: "price" ,
];
rowData = [
make: "Toyota", model: "m1", price: 35351 ,
make: "Ford", model: "m2", price: 6546 ,
make: "M3", model: "m3", price: 646 ,
make: "M765", model: "m4", price: 56486
]
app.component.scss
@import "~ag-grid/dist/styles/ag-grid.css";
@import "~ag-grid/dist/styles/ag-theme-balham.css";
我还尝试了其他教程，上面写着app.component.scss
@import "~ag-grid-community/dist/styles/ag-grid.css";
@import "~ag-grid-community/dist/styles/ag-theme-balham.css";
【问题讨论】：
【参考方案1】：Ag Grid 样式应该在styles.scss 中而不是在app.component.scss 中导入
所以尝试在styles.scss中导入并检查：
@import "~ag-grid-community/dist/styles/ag-grid.css";
@import "~ag-grid-community/dist/styles/ag-theme-balham.css";
【讨论】：
为什么没有记录？非常感谢 @Makky ag-grid 文档不如 angular【参考方案2】：我遇到了完全不同但相似的情况，在配置和集成 agGrid 后，功能按预期工作，但显示效果不佳。例如，排序和过滤器图标不呈现，启用时复选框不显示。
我意识到这是因为我在 HTML 中选择了与全局 style.css/scss 中导入的主题不同的主题。
【讨论】：
【参考方案3】：首先你必须在app.module.ts添加相关模块
之后，您可以在 html 文件中直接添加 CSS 源代码
像这样：
app.component.html
<head>
<script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css"
/>
<link
rel="stylesheet"
href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-alpine.css"
/>
</head>
<ag-grid-angular style="width: 500px; height: 500px;" class="ag-theme-balham" [rowData]="rowData"
[columnDefs]="columnDefs">
</ag-grid-angular>
【讨论】：
以上是关于Angular Ag-Grid 无法正确显示的主要内容，如果未能解决你的问题，请参考以下文章
Angular & ag-grid：无法使用 frameworkComponents 注册框架组件
Angular Grid（ag-grid）显示/隐藏不起作用