ag-grid 示例未正确显示

Question

试图在我的项目中实施 ag-grid，但遇到了一些问题。

从 "Get started" (https://www.ag-grid.com/angular-grid/) 示例开始，但它没有按预期工作。

甚至创建了新的 angular 项目，但遇到了同样的问题。

Printescreen with the issue

依赖关系：

"dependencies": {
    "@angular/animations": "~9.0.0",
    "@angular/common": "~9.0.0",
    "@angular/compiler": "~9.0.0",
    "@angular/core": "~9.0.0",
    "@angular/forms": "~9.0.0",
    "@angular/platform-browser": "~9.0.0",
    "@angular/platform-browser-dynamic": "~9.0.0",
    "@angular/router": "~9.0.0",
    "ag-grid-angular": "^22.1.1",
    "ag-grid-community": "^22.1.1",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  }

任何想法可能是什么问题？

Answer 1

我认为你没有在你的 style.scss 中注入 ng-grid 的样式，如果是的话，请在你的 style.scss 中添加这两行：

@import "~ag-grid-community/dist/styles/ag-grid.css";
@import "~ag-grid-community/dist/styles/ag-theme-balham.css";

并像这样添加主题的 class：

<ag-grid-angular
class="ag-theme-balham"
.
.
.
></ag-grid-angular>

ag-grid 示例未正确显示

ag-grid example doesn't display properly

ag-grid

angular

ag-grid-angular