时间戳

首页 > 解决方案 > 安装后 ag 网格样式不起作用

angular - 安装后 ag 网格样式不起作用

问题描述

这是我的dashboard.component.html

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

这是我的dashboard.component.ts

columnDefs = [
    { field: 'Date', sortable: true, filter: true },
    { field: 'Time Elapsed', sortable: true, filter: true },
    { field: 'UOID', sortable: true, filter: true },
    { field: 'Claim', sortable: true, filter: true },
    { field: 'Cust Name', sortable: true, filter: true },
    { field: 'Cust Mobile', sortable: true, filter: true },
    { field: 'City', sortable: true, filter: true },
    { field: 'Service', sortable: true, filter: true },
    { field: 'Amount', sortable: true, filter: true },
    { field: 'Online Received', sortable: true, filter: true },
    { field: 'Pay Mode', sortable: true, filter: true },
    { field: 'Pay Status', sortable: true, filter: true },
    { field: 'Order Status', sortable: true, filter: true },
    { field: 'Pilot', sortable: true, filter: true },
    { field: 'Action', sortable: true, filter: true }
];
rowData = [];

这是我的dashboard.module.ts

import { AgGridModule } from 'ag-grid-angular';
@NgModule({
providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: AuthInterceptor,
      multi: true
    }
],
imports: [
    CommonModule, 
    NgbCarouselModule, 
    NgbAlertModule, 
    DashboardRoutingModule, 
    StatModule, 
    AgGridModule.withComponents([])
],
declarations: [
    DashboardComponent, 
    TimelineComponent, 
    NotificationComponent, 
    ChatComponent
] }) export class DashboardModule {}

这是我的dashboard.component.scss

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

我得到的输出

我正在使用 SB admin bs4 仪表板。我不知道为什么这个问题没有解决

标签： angular

解决方案

不要将 Ag 网格的 css 添加到dashboard.component.scss，而是将这些导入移动到您的styles.scss或将它们包含在styles您的数组中，angular.json如下所示：

"styles":[
 "src/styles.scss",
 "node_modules/ag-grid-community/dist/styles/ag-grid.css",
 "node_modules/ag-grid-community/dist/styles/ag-theme-balham.css",
]

推荐阅读