ag-grid没有显示任何数据

时间:2017-02-10 13:07:33

标签: angularjs asp.net-web-api rendering ag-grid

我正在使用带有angularjs的ag-grid。所以在控制器中我用sql DB源填充网格行。为此,我正在进行webapi调用,返回对象数组。以下是代码。

var module = angular.module("crud", ["agGrid"]);

module.controller("crudCtrl", function ($scope, $http) {
var columnDefs = [
   { headerName: "Roll No", field: "RollNo", editable: true },
   { headerName: "Name", field: "Name", editable: true },
   { headerName: "Place", field: "PlaceName", editable: true },
   { headerName: "Birth Date", field: "dob", editable: true }
];


$scope.gridOptions = {
    columnDefs: columnDefs,
    rowData: [],
    headerHeight: 42,
    rowHeight: 32

};

$http.get("api/Student/GetAllStudents").then(function (response) {
    $scope.gridOptions.rowData = response.data;

}, function (error) {
    console.log('Oops! Something went wrong while saving the data.')
});


});

但是当我运行页面时,它没有显示任何数据。当我调试并看到它将response.data中的记录作为一个对象数组返回为array [12]。但它在网格中没有显示相同的内容。如果不是response.data,我将自己的数组分配给响应返回的数组,然后呈现数据。那么,问题出在哪里?

1 个答案:

答案 0 :(得分:5)

我们遇到了类似的问题。您可能需要使用gridOptions.onGridReady

        onGridReady: () => {
            //setup first yourColumnDefs and yourGridData

            //now use the api to set the columnDefs and rowData
            this.gridOptions.api.setColumnDefs(yourColumnDefs);
            this.gridOptions.api.setRowData(yourGridData);
        },