Angular中无法将API返回的JSON数据显示在ag-grid中

问题根源 #

ag-grid 的 rowData 必须是数组类型，但你的后端返回的是单个对象：

{
    "id": 1,
    "text": "Sentence1"
}

直接将单个对象赋值给 rowData 时，grid 内部会调用数组的 map 方法处理数据，而对象没有该方法，因此抛出错误。

解决方案 #

情况1：后端应返回多条数据 #

调整后端接口，让其返回数组格式的响应，例如：

[
    {"id": 1, "text": "Sentence1"},
    {"id": 2, "text": "Sentence2"}
]

情况2：后端仅返回单条数据 #

在前端将单个对象包装成数组后再赋值给 rowData：

this.DataService.getHello().subscribe(data => {
  this.rowData = [data]; // 把单个对象放入数组
  console.log(this.rowData);
})

额外检查 #

确保你的 columnDefs 正确配置了对应字段，示例：

columnDefs = [
  { field: 'id', headerName: 'ID' },
  { field: 'text', headerName: '文本' }
];

内容的提问来源于stack exchange，提问作者Chin