Question

我在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>

Answer 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">

不要在ag-grid中显示数据

1 个答案: