Angular Ag-Grid 显示不正确

Question

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

我已经学习了这些教程

问题/问题 我完全遵循了每一件事。即使数据正在加载到网格中，但 View 也不是很明显。这是我得到的（不是对齐，没有着色）

我尝试过的方法 我在 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";

Answer 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";

Answer 2

我遇到了一个完全不同但相似的情况，在配置和集成 agGrid 后，功能按预期工作，但显示效果不佳。例如，排序和筛选器图标不呈现，复选框在启用时不显示。

我意识到这是因为我在 HTML 中选择了与全局样式中导入的主题不同的主题。css/scss。

Answer 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>

Answer 4

Post 它在这里，因为这是 Google 搜索中的第一个结果。

有同样的问题： React + Storybook 无法正确显示 ag-grid dark/light 个自定义主题。

将默认 @import "~ag-grid-community/dist/styles/ag-grid"; 设置为通用 style.css 解决了这个问题。

Angular Ag-Grid 显示不正确

Angular Ag-Grid not displaying correctly

angular

ag-grid-angular

angular8

app.component.html