Angular Ag-Grid 无法正确显示

2024-03-17

我正在尝试使用角度Ag-Grid https://www.ag-grid.com/在我的网络应用程序中。

我已经遵循了这些教程

  1. 角网格|开始使用 ag-Grid https://www.ag-grid.com/angular-getting-started/

  2. ag-Grid 角度组件 https://www.npmjs.com/package/ag-grid-angular

Problem / Issue I Follwed every thing exactly. Even data is being loaded in grid but View is not very appreciable. Here what I'm getting (not alignment, no coloring) enter image description here

我尝试过的我通过 Google 和 Stack Overflow 进行了广泛的搜索。一些答案建议CSS没有正确加载(这是可靠的论据),但我仔细检查了我的导入语句Component.css并且还尝试添加.css参考文献index.html. The .css我引用的文件是存在的,参考也很好。

我的期望

Codes

应用程序组件.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";

Ag 网格样式应在 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";
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Angular Ag-Grid 无法正确显示 的相关文章

随机推荐