Angular2 ag-grid 数据源不工作

Question

我正在尝试让我的 ag-grid 正常工作，但出现错误。

代码如下：

import { Component, OnInit } from '@angular/core';
import {AgGridNg2} from 'ag-grid-ng2/main';
import {GridOptions} from 'ag-grid/main';


import {ClientsService} from './clients.service';

@Component({
    moduleId: module.id,
    selector: 'clients',
    directives: [AgGridNg2],
    templateUrl: 'clients.component.html',
    providers: [ClientsService]
})
export class ClientsComponent implements OnInit {

    private gridOptions: GridOptions;
    private showGrid: boolean;
    private rowData: any[];
    private columnDefs: any[];
    private rowCount: string;

    constructor(private _clientsService : ClientsService) {

        this.gridOptions = <GridOptions>{};
        this.createColumnDefs();
        this.showGrid = true;

        this.gridOptions = {
            columnDefs: this.columnDefs,
        }   

         this.gridOptions = <GridOptions>{
            onGridReady: () => {
                this.gridOptions.api.sizeColumnsToFit();
                this.gridOptions.api.setDatasource(this.dataSource);
            }
        };


     }

    ngOnInit() { }

    dataSource = {
        pageSize: 10,
        overflowSize: 100,

       getRows: (params: any) => {
            this.returnRows().subscribe(data => {

                var test =
                    [{"ClientName":"Ronald Bowman","Country":"China","CreatedOn":"Lutou","email":"rbowman0@spotify.com"},
                    {"ClientName":"Pamela Hill","Country":"Russia","CreatedOn":"Krylovskaya","email":"phill1@symantec.com"},
                    {"ClientName":"Robin Andrews","Country":"Ukraine","CreatedOn":"Korop","email":"randrews2@photobucket.com"},
                    {"ClientName":"Peter Kim","Country":"Mexico","CreatedOn":"San Jose","email":"pkim3@theatlantic.com"},
                    {"ClientName":"Carol Foster","Country":"Mexico","CreatedOn":"El Aguacate","email":"cfoster8@intel.com"},
                 ];

                 var rowsThisPage = data.slice(params.startRow, params.endRow);

                 var lastRow = -1;

                 params.successCallback(rowsThisPage, lastRow);

            });
        }
    }


    private returnRows(){
        return this._clientsService.getClientsForDataTable();
    }   


     private createColumnDefs() {
        this.columnDefs  = [
            {headerName: 'Client Name', field: "ClientName", width: 200 },
            {headerName: 'Country', field: "Country" ,width:180},
            {headerName: 'Created On', field: "CreatedOn" ,width:160}
        ];
    }

}

这是我的服务，它以 JSON 格式从后端获取数据：

import { Injectable } from '@angular/core';

import {Http, Response, Headers} from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { GlobalVariablesService } from '../../shared/global/global-variables.service';

@Injectable()
export class ClientsService {

    constructor(public _http:Http, private _globalVariables: GlobalVariablesService) { 

    }

    getClientsForDataTable() {
            return this._http.get(this._globalVariables.BACKEDN_API_GET_ALL_CLIENTS_FOR_DATA_TABLE) 
           .map((res:Response) => res.json())
           .catch(this.handleError);
    }

    private handleError (error: Response) {
        console.error(error);
        return Observable.throw(error.json().error || 'Server error');
  }
}

正如您在上面的组件中看到的，当尝试使用硬编码的 JSON 数据时，它工作正常，但是当我用实际的 HTTP 响应替换它时，我得到一个错误，如下所示：

getRows: (params: any) => {
            this.returnRows().subscribe(data => {

                var test =
                    [{"ClientName":"Ronald Bowman","Country":"China","CreatedOn":"Lutou","email":"rbowman0@spotify.com"},
                    {"ClientName":"Pamela Hill","Country":"Russia","CreatedOn":"Krylovskaya","email":"phill1@symantec.com"},
                    {"ClientName":"Robin Andrews","Country":"Ukraine","CreatedOn":"Korop","email":"randrews2@photobucket.com"},
                    {"ClientName":"Peter Kim","Country":"Mexico","CreatedOn":"San Jose","email":"pkim3@theatlantic.com"},
                    {"ClientName":"Carol Foster","Country":"Mexico","CreatedOn":"El Aguacate","email":"cfoster8@intel.com"},
                 ];

                 var rowsThisPage = data.slice(params.startRow, params.endRow);

                 var lastRow = -1;

                 params.successCallback(rowsThisPage, lastRow);

            });
        }

这是错误：

异常：TypeError：rowData.forEach 不是函数 TypeError：rowData.forEach 不是函数 在 recursiveFunction (inMemoryRowModel.js:355) 在 InMemoryRowModel.createRowNodesFromData (inMemoryRowModel.js:330) 在 InMemoryRowModel.setRowData (inMemoryRowModel.js:296) 在 PaginationController.pageLoaded (paginationController.js:138) 在 Object.successCallback (paginationController.js:210) 在 SafeSubscriber.eval [as _next] (clients.component.ts:64) 在 SafeSubscriber.__tryOrUnsub (Rx.js?1467025050775:10855) 在 SafeSubscriber.next (Rx.js?1467025050775:10810) 在 Subscriber._next (Rx.js?1467025050775:10766) 在 Subscriber.next (Rx.js?1467025050775:10743)

我已经测试了来自“数据”的 JSON 结果，应该没问题，因为我刚刚复制并替换了它而不是测试数据。

谁能帮我解决这个错误？

Answer 1

数据应该是一个数据对象数组。我的猜测是你的数据是一个字符串（json）。您需要将 json 转换为数据数组。

Answer 2

好的，我把它固定为：

dataSource = {
    pageSize: 10,
    overflowSize: 100,

    getRows: (params: any) => {
        this.returnRows(params.startRow, params.endRow).subscribe(data => {
            var convertedDataToArray = JSON.parse(data);

             var lastRow = -1;

             params.successCallback(convertedDataToArray, lastRow);

        });
    }
}

Answer 3

我在使用 React 时遇到了同样的错误。这是查找错误时弹出的答案，所以我会在这里回复，因为ag-grid 与React 和Angular 相似。

---

就我而言，这是因为我试图将对象分配给网格而不是数组。由于Redux 的不变性要求，我这样做了：

Object.assign({}, items)

什么时候应该是这样的：

Object.assign([], items)

Answer 4

我刚刚遇到了这个问题。我正在使用“ag-grid-angular”：“^18.1.0”。 添加了 onGridReady 事件以填充我在 ag-grid-angular 标记中添加属性 (gridReady)="onGridReady($event)" 的网格数据。

当我尝试填充数据时，它显示了上述错误。

在尝试了几件事后，我添加了 agGrid: AgGridNg2;变量并导入参考，它开始正常工作。代码spinet如附件。

export class AppointmentComponent implements OnInit { @ViewChild('agGrid') agGrid: AgGridNg2;