Question

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

我已经遵循了这些教程

问题/问题 我完全追随了一切。即使将数据加载到网格中，但View也不是很明显。这就是我要得到的（不对齐，不着色）

我尝试过的我在Google和Stack Overflow上进行了广泛的搜索。一些答案建议CSS未正确加载（这是可靠的参数），但我再次检查了Component.css上的import语句，还尝试在.css中添加index.html引用。我引用的.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网格样式应在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 中选择了一个与全局 style.css/scss 中导入的主题不同的主题。

角Ag-Grid无法正确显示

2 个答案: