Angular Ag-Grid 无法正确显示答案

【问题标题】：Angular Ag-Grid not displaying correctlyAngular Ag-Grid 无法正确显示
【发布时间】：2020-01-09 03:51:19
【问题描述】：

我正在尝试在我的 Web 应用程序中使用 Angular Ag-Grid。

我已经学习了这些教程

问题/问题 我完全按照每件事。甚至数据也被加载到网格中，但视图不是很明显。这是我得到的（不是对齐，没有着色）

我尝试了什么我在 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";

【问题讨论】：

标签： angular angular8 ag-grid-angular

【解决方案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>

【讨论】：