问ag-网格-不以表格格式显示数据的角度

EN

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() {
}

}

<h1>Grid example</h1>

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

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 { }