ag-grid-angular: Ошибка TypeError: rowData.forEach не является функцией - PullRequest
Новая
       14

ag-grid-angular: Ошибка TypeError: rowData.forEach не является функцией

0 голосов
/ 03 декабря 2018

Попытка включить 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'}
    ];

In 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, совпадают с данными, которые я использовал при статической настройке.Возвращаемый результат - массив в соответствии с запросом. Посоветуйте, пожалуйста, что нужно сделать, чтобы это заработало.

Ответы [ 2 ]

0 голосов
/ 05 июля 2019

AgGrid - Angular 1. 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);
}

Надеюсь, это поможет.

0 голосов
/ 03 декабря 2018

Ошибка здесь в том, что вы пытаетесь назначить Наблюдаемое как данные для ag-grid.
.map() возвращает наблюдаемое, на которое вы должны подписаться, и предоставить данные в ag-grid.

Примерно так - 

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

Имейте в виду, что эта ошибка -

rowData.forEach не является функцией

очень хороший показатель того, что ваши rowData не являются массивом.

Подробнее о карте и подписке здесь

...