ag网格无法在angular中正确显示

Question

我正在尝试使用ag-grid，但是结果不正确，我不知道有什么问题，这是我的HTML代码

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

这是ts

import { Component, OnInit } from '@angular/core';
import { AgGridModule } from 'ag-grid-angular';

@Component({
  selector: 'app-user-access',
  templateUrl: './user-access.component.html',
  styleUrls: ['./user-access.component.css']
})
export class UserAccessComponent implements OnInit {

  columnDefs = [
    {headerName:'make',field: 'make' },
    {headerName:'model',field: 'model' },
    {headerName:'price',field: 'price'}
];

rowData = [
    { make: 'Toyota', model: 'Celica', price: 35000 },
    { make: 'Ford', model: 'Mondeo', price: 32000 },
    { make: 'Porsche', model: 'Boxter', price: 72000 }
];

  constructor() { }

  ngOnInit(): void {
  }

}

这是CSS

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

我也将这些导入添加到style.css中，但结果不是很好

​

Answer 1

嗨，试试这个，我想你的css导入路径不正确。

@import "~@ag-grid-community/core/dist/styles/ag-grid.css";
@import "~@ag-grid-community/core/dist/styles/ag-theme-fresh/sass/ag-theme-fresh.css";

Answer 2

我之前没有使用ag-Grid的经验，但它似乎是直接从他们的stackblitz example复制过来的，似乎工作正常。因为你向我们展示的东西看起来是一样的(除了使用.scss和你有.css样式之外)，我会看看其他地方：

如果它似乎不能为您正确工作，请验证您的`package.json文件中是否包含相同版本的ag-grid-angular和ag-grid-community。也许可以重新运行npm install，以确保两个包都已实际安装。

尝试导航到您提供ng-grid .css文件的路径，并确保它们在物理位置。

确保在加载应用程序时，控制台中没有抛出错误。确保在重建应用程序时，angular CLI控制台中没有错误。

Answer 3

一切看起来都很好，只是您似乎正在使用用于styles.css中SCSS文件的导入

如果您在styles.scss中使用SCSS，则应添加以下行：

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

如果你通过CSS导入主题，那么在你的index.html文件中添加这个：

<link rel="stylesheet" type="text/css" href="/node_modules/ag-grid-community/dist/styles/ag-grid.css" />
<link rel="stylesheet" type="text/css" href="/node_modules/ag-grid-community/dist/styles/ag-theme-balham.css" />