Angular Ag-Grid 显示不正确

Question

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

我已经按照这些教程

1. 角网格 | 开始使用 ag-Grid

2. ag-Grid 角度组件

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

我尝试过的内容是通过 Google 和 Stack Overflow 进行广泛搜索。一些答案建议CSS没有正确加载（这是一个可靠的论点），但我仔细检查了我的导入语句，Component.css并尝试.css在index.html. .css我参考的文件存在并且参考也很好。

我的期望

代码

应用组件.html

<ag-grid-angular style="width: 500px; height: 500px;" class="ag-theme-balham" [rowData]="rowData"
  [columnDefs]="columnDefs">
</ag-grid-angular>

应用组件.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 }
  ]
}

应用程序组件.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 样式应该在 style.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";