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