ag-grid-angular：错误类型错误：rowData.forEach 不是函数答案

【问题标题】：ag-grid-angular: Error TypeError: rowData.forEach is not functionag-grid-angular：错误类型错误：rowData.forEach 不是函数
【发布时间】：2019-05-04 07:19:19
【问题描述】：

尝试在我的项目中加入 ag-grid-angular。我已经成功地让它通过过滤和排序处理静态数据。

我现在无法使用异步动态数据设置它。

<ag-grid-angular 
style="width: 1100px; height: 1000px;" 
class="ag-theme-balham" 
[enableSorting]="true"
[enableFilter]="true" 
id ="mygrid"
[animateRows]="true"
[rowData]="rowss | async"
[columnDefs]="columnDefs"
>	
</ag-grid-angular>

在 component.ts 中：

public rowss: any = null;

this.rowss = this.Service.getReport(this.model)

我现在已经静态设置了列

columnDefs = [
        {headerName: 'Make', field: 'make' },
        {headerName: 'Model', field: 'model' },
        {headerName: 'Price', field: 'price'}
    ];

在 Service.ts 中：

getReport( request: ReportModel ) {
            return this.http.get( this.URL + super.jsonToQueryParam( request ) ).map(( response: Response ) => response.json() );
        }

我收到此错误消息：

enter image description here

ng:///ProdCtnReportModule/ProdCtnReportComponent.ngfactory.js:100 ERROR TypeError: rowData.forEach is not a function
    at ClientSideNodeManager.recursiveFunction (webpack-internal:///./node_modules/ag-grid/dist/lib/rowModels/clientSide/clientSideNodeManager.js:193)
    at ClientSideNodeManager.setRowData (webpack-internal:///./node_modules/ag-grid/dist/lib/rowModels/clientSide/clientSideNodeManager.js:65)
    at ClientSideRowModel.setRowData (webpack-internal:///./node_modules/ag-grid/dist/lib/rowModels/clientSide/clientSideRowModel.js:483)
    at GridApi.setRowData (webpack-internal:///./node_modules/ag-grid/dist/lib/gridApi.js:156)
    at Function.ComponentUtil.processOnChange (webpack-internal:///./node_modules/ag-grid/dist/lib/components/componentUtil.js:120)
    at AgGridNg2.ngOnChanges (webpack-internal:///./node_modules/ag-grid-angular/dist/agGridNg2.js:363)
    at checkAndUpdateDirectiveInline (webpack-internal:///./node_modules/@angular/core/esm5/core.js:12623)
    at checkAndUpdateNodeInline (webpack-internal:///./node_modules/@angular/core/esm5/core.js:14151)
    at checkAndUpdateNode (webpack-internal:///./node_modules/@angular/core/esm5/core.js:14094)
    at debugCheckAndUpdateNode (webpack-internal:///./node_modules/@angular/core/esm5/core.js:14987)

我们从 API 调用中获得的数据与我在静态设置时使用的数据相同。返回结果是请求的数组。 请告知需要做什么才能使其发挥作用。

【问题讨论】：

标签： ag-grid ag-grid-angular

【解决方案1】：

这里的错误是您试图将 Observable 分配为 ag-grid 的数据。
.map() 返回一个您应该订阅并向 ag-grid 提供数据的 observable。

类似的东西 -

const rowss$ = this.Service.getReport(this.model);
rowss$.subscribe(rowData => {
  params.api.setRowData(rowData);
});

记住这个错误 -

rowData.forEach 不是函数

是一个很好的指标，表明您的 rowData 不是数组。

更多地图与订阅here

【讨论】：

感谢您的提示，我正在使用 vue 作为框架，在我的情况下，错误是，我声明了这样的行数据 rowData : any = {}; 而不是这样的 rowData : any = [];

【解决方案2】：

AgGrid - 角度 1. 后端：首先确保你的后端返回一个对象数组例如：List detail = new ArrayList();

[
    {
        "stockId": 1,
        "side": "Buy",
        "status": "Saved"
     },
     {
        "stockId": 2,
        "side": "Sell",
        "status": "Saved"
     }
]

如果您将企业版用于主-详细信息，那么您需要确保控制器中的 findById 例如返回一个包含 1 个对象 [{}] 的数组

agGrid 文档： https://www.ag-grid.com/javascript-grid-master-detail/ 在这个来自 AgGrid 文档示例的链接中，下面的 callRecords 字段正在返回一个对象数组。

getDetailRowData: function(params) {
   params.successCallback(params.data.callRecords);
}

我希望这会有所帮助。

【讨论】：