ag-grid-angular: Error TypeError: rowData.forEach is not function

Question

Trying to incorporate ag-grid-angular in my project. I have succeeded in getting it to work with static data with filtering and sorting.

I am failing at setting it up with Dynamic data in async right now.

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

In component.ts:

public rowss: any = null;

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

I have set the columns statically right now

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

In Service.ts:

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

I am getting this error message:

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)

The data we get from the API call is the same as the data I used when setting it up statically. The return result is an Array as requested. Please advice what needs to be done make it work.

Answer 1

The error here is that you are trying to assign an Observable as data for ag-grid.
.map() returns an observable which you should subscribe to and provide data to ag-grid.

Something like this -

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

Keep in mind that this error -

rowData.forEach is not a function

is a very good indicator that your rowData is not an array.

More on map vs subscribe here