Angular Ag-Grid 無法正確顯示
[英]Angular Ag-Grid not displaying correctly
問題描述
我正在嘗試在我的 Web 應用程序中使用 Angular Ag-Grid 。
我已經按照這些教程
問題/問題我完全按照每件事。 甚至數據也被加載到網格中，但視圖不是很明顯。 這是我得到的（不是 alignment，沒有着色）
我嘗試過在 Google 和 Stack Overflow 上進行廣泛搜索。 Some Answers recommend that CSS is not loading Properly ( which is solid argument) but I double check my import statements on Component.css 8CBA22E28EB17B5F5C6AE2A266AZ and Also tried adding .css reference in index.html . 我提到的.css文件存在並且參考也很好。
我的期望
代碼
appComponent.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 }
]
}
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";
5 個解決方案
解決方案1
14 已采納 2019-09-06 12:33:12
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";
解決方案2
0 2021-01-30 19:54:43
我遇到了完全不同但相似的情況，在配置和集成 agGrid 后，功能按預期工作，但顯示效果不佳。 例如，排序和過濾器圖標不呈現，啟用時不顯示復選框。
我意識到這是因為我在 HTML 中選擇了一個與全局 style.css/scss 中導入的主題不同的主題。
解決方案3
0 2021-10-02 10:15:45
首先你必須在app.module.ts添加相關模塊
之后，您可以在 html 文件中直接添加 CSS 源
像這樣：
應用程序組件.html
<head>
<script src="https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.noStyle.js"></script>
<link
rel="stylesheet"
href="https://unpkg.com/ag-grid-community/dist/styles/ag-grid.css"
/>
<link
rel="stylesheet"
href="https://unpkg.com/ag-grid-community/dist/styles/ag-theme-alpine.css"
/>
</head>
<ag-grid-angular style="width: 500px; height: 500px;" class="ag-theme-balham" [rowData]="rowData"
[columnDefs]="columnDefs">
</ag-grid-angular>
解決方案4
0 2022-04-06 17:56:08
在這里發布它，因為這是 Google 搜索的第一個結果。
有同樣的問題：React + Storybook 沒有正確顯示帶有深色/淺色自定義主題ag-grid 。
將默認@import "~ag-grid-community/dist/styles/ag-grid"; 進入普通style.css解決了這個問題。
解決方案5
0 2022-09-07 05:59:10
我在react-ag-grid中遇到了同樣的事情，通過導入 styles 解決了。
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css";
字體真棒圖標未顯示在 Angular 8 中的 ag-grid 單元格內
[英]Font awesome icon not displaying inside ag-grid cell in Angular 8
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.