ag-grid-angular: Ошибка TypeError: rowData.forEach не является функцией
Попытка включить 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() );
}
Я получаю это сообщение об ошибке:
введите описание изображения здесь
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, совпадают с данными, которые я использовал при статической настройке. Возвращаемый результат - массив в соответствии с запросом. Пожалуйста, посоветуйте, что нужно сделать, чтобы это заработало.
3 ответа
Ошибка здесь в том, что вы пытаетесь назначить Observable как данные для ag-grid..map()
возвращает наблюдаемое, на которое вы должны подписаться и предоставить данные в ag-grid.
Что-то вроде этого -
const rowss$ = this.Service.getReport(this.model);
rowss$.subscribe(rowData => {
params.api.setRowData(rowData);
});
Имейте в виду, что эта ошибка -
rowData.forEach не является функцией
очень хороший показатель того, что ваши rowData не являются массивом.
Больше на карте против подписки здесь
Согласитесь с @Pratik, что сообщение определенно склоняется к тому, что свойство не является массивом.
Тем не менее, я опубликую наш немного другой сценарий, который создал это исключение для других, наткнувшихся на этот пост.
Наш columnDefs был частным свойством типа
то есть
Это создает исключение:
private columnDefs: any[];
getColumnDefinitions() {
return columnDefs;
}
Это работает правильно:
private columnDefs: any[];
public get ColumnDefinitions() {
return columnDefs;
}
AgGrid - Angular1. Backend: прежде всего убедитесь, что ваш backend возвращает массив объектов. Например: List detail = new ArrayList<>();
[
{
"stockId": 1,
"side": "Buy",
"status": "Saved"
},
{
"stockId": 2,
"side": "Sell",
"status": "Saved"
}
]
Если вы используете версию Enterprise для master-detail, вам необходимо убедиться, что ваш findById в вашем контроллере, например, возвращает массив из 1 объекта [{}]
Документы agGrid: https://www.ag-grid.com/javascript-grid-master-detail/ В этой ссылке из примера документа AgGrid поле callRecords ниже возвращает массив объектов.
getDetailRowData: function(params) {
params.successCallback(params.data.callRecords);
}
Надеюсь, это поможет.