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:

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)

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.

Solution

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