ag-grid-angular不以表格格式显示数据

Question

我使用ag-grid-angular以表格格式显示数据，但所有数据都混乱到一列。

我正在使用原始数据填充ag-grid。

我的component.ts文件

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


@Component({
 selector: 'app-main',
 templateUrl: './main.component.html',
 styleUrls: ['./main.component.css']
})
export class MainComponent implements OnInit {
gridOptions: GridOptions;
columnDefs= [
   {headerName: 'Pokemon', field: 'name'},
   {headerName: 'Type', field: 'type'},
   {headerName: 'Price', field: 'price'},

];
rowData = [
{name : 'Bulbasaur', type: 'plant', price: 1000},
{name : 'Bulbasaur', type: 'plant', price: 1000},
{name : 'Bulbasaur', type: 'plant', price: 1000},
{name : 'Bulbasaur', type: 'plant', price: 1000},
{name : 'Bulbasaur', type: 'plant', price: 1000},
{name : 'Bulbasaur', type: 'plant', price: 1000},
{name : 'Bulbasaur', type: 'plant', price: 1000},
{name : 'Bulbasaur', type: 'plant', price: 1000},
{name : 'Bulbasaur', type: 'plant', price: 1000},
{name : 'Bulbasaur', type: 'plant', price: 1000},
{name : 'Bulbasaur', type: 'plant', price: 1000}
];
constructor() {
this.gridOptions = <GridOptions>{
  rowCount: 10
};
}

ngOnInit() {
}

}

在上面的代码

中声明了rowData和colDefs

我的component.html代码：

<h1>Grid example</h1>

<ag-grid-angular class = "ag-fresh"
            [rowData]="rowData"
            [columnDefs]="columnDefs"
             [gridOptions]="gridOptions"
            >
 </ag-grid-angular>

我的app.module.ts文件：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { MainComponent } from './main/main.component';
import {AgGridModule} from 'ag-grid-angular';


@NgModule({
 declarations: [
 AppComponent,
 MainComponent
],
imports: [
BrowserModule,
AgGridModule.withComponents(MainComponent)
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

Answer 1

将以下内容添加到 .angular-cli.json

的样式部分

"../node_modules/ag-grid/dist/styles/ag-grid.css",
"../node_modules/ag-grid/dist/styles/theme-fresh.css",

Answer 2

在底部使用Angular CLI（https://www.ag-grid.com/ag-grid-angular-angularcli/#creating-a-angular-project-with-ag-grid）构建ag-Grid的教程中，它们告诉您将ag-Grid的样式表放入angular-cli.json文件中。像ishabi描述的那样。

要完成答案而不只是发布链接： 将以下两行添加到 .angular-cli.json 文件中：

 "../node_modules/ag-grid/dist/styles/ag-grid.css",
 "../node_modules/ag-grid/dist/styles/ag-theme-balham.css"

根据您使用的主题更改第二行。