不在 ag-grid 中显示数据答案

【问题标题】：don't show data in ag-grid不在 ag-grid 中显示数据
【发布时间】：2017-09-14 14:33:08
【问题描述】：

我在 angular4 中使用 ag-grid。我想通过获取方法使用 API 显示数据。我的 API 没问题，还在控制台中获取数据。但我无法在 ag-grid 中显示数据。我不明白这里有什么问题。当我编译我的项目时，没有显示错误。我的项目在浏览器中运行，也显示标题名称，但不显示来自 API 的数据。

我的 ts 文件：

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

@Component({
selector: 'app-my-grid-application',
templateUrl: './my-grid-application.component.html',
styleUrls: ['./my-grid-application.component.css']
})

export class MyGridApplicationComponent implements OnInit {

public gridOptions: GridOptions;
public columnDefs = [];
public rowData = [];

constructor(public http: Http) {
this.gridOptions = <GridOptions>{
  rowData: [],
  columnDefs: [
    {
      headerName: 'ID',
      field: 'id'
    },
    {
      headerName: 'Name',
      field: 'name'
    }
  ]
}

这是API链接的GET方法

ngOnInit() {
const url = 'http://localhost:3000/studentInfo/students';
this.http.get(url).subscribe(
  res => {
    this.gridOptions = res;
  },
  msg => {
    console.error(`Error: ${msg.status} ${msg.statusText}`);
  }
);
}
}

这是我定义网格演示的 HTML 文件

我的 html 文件：

  <ag-grid-angular #agGrid style="width: 650px; height: 200px;" class="ag-
  fresh" [gridOptions]="gridOptions"  [columnDefs]="columnDefs 
  [rowData]="rowData">
  </ag-grid-angular>

【问题讨论】：

在我看来您没有填写您的 rowData？ private createRowData() { var rowData:any[] = []; for (var i = 0; i < 3; i++) { rowData.push({ id: RefData[i].id, name: RefData[i].name }); } this.rowData = rowData; }
我已经使用 :this.http.get(url).subscribe( res => { this.rowData = res.json(); // console.log(res.json( )); console.log(this.gridOptions.rowData); },

标签： angular typescript ag-grid

【解决方案1】：

我已经用这种方法解决了这个问题......

ngOnInit() {
const url = 'http://localhost:3000/studentInfo/students';
this.http.get(url).subscribe(
  res => {
    this.rowData = res.json();
  },
  msg => {
    console.error(`Error: ${msg.status} ${msg.statusText}`);
  }
);

}

和html：

<ag-grid-angular #agGrid style="width: 650px; height: 200px;" class="ag-fresh"
               [gridOptions]="gridOptions" [rowData]="rowData">

【讨论】：