【发布时间】：2018-06-04 07:39:33
【问题描述】：
我正在使用 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 { }
【问题讨论】：
-
在我看来您缺少一些与 ag-grid 相关的样式，因为那看起来根本不像 ag-grid？
-
这是解决方案吗？
标签： angular typescript ag-grid