setRowData 未将数据加载到网格中

Question

我正在使用 ag-grid 将值显示到 grid.But 中，使用 setRowData 未将值加载到 grid.Below 是我在 setTimeOut 函数中调用 setRowData 的代码因为它抛出 api 未定义：

<html>
 <head>
 </head>
 <body ng-app ng-controller="CustController as custCtrl">
     <div ag-grid="custCtrl.gridOptions" id="myGrid" style="height: 
      115px;width:500px;" class="ag-fresh"></div>
 </body>
</html>

var app = angular.module('myApp');
app.controller('CustController', function($scope, $http) {
var columnDefs = [
  {headerName: "Customer Name", field: "custName"},
  {headerName: "Address", field: "address"},
  {headerName: "Ph NO", field: "phNo"}
];

var rowData = [
{custName: "A", address: "xyz", phNo: '123-123-1234'},
{custName: "B", address: "lmn", phNo: '345-456-5672'},
{custName: "C", address: "pqr", phNo: '903-456-2345'}
];

var gridOptions = {
  columnDefs: columnDefs,
  enableColResize: true,
  rowBuffer:0,
  enableSorting: true,
  enableFilter: true,
  rowHeight: 30,
  headerHeight: 35,
  sizeColumnsToFit: true,
  onGridReady: function () {
    setTimeout( function(){
                        $scope.gridOptions.api.setRowData(rowData);
                    },5000);
   },
   suppressLoadingOverlay: true,
   pagination: true
 };
});

Answer 1

尝试将 onGridReady 函数移到 gridOptions 之外。

var rowData = [
{custName: "A", address: "xyz", phNo: '123-123-1234'},
{custName: "B", address: "lmn", phNo: '345-456-5672'},
{custName: "C", address: "pqr", phNo: '903-456-2345'}
];

单击按钮调用 getData() 函数时通过 http get 方法从数据库中获取

$scope.getData = function(){
  //console.log("hello");
  $http.get("https://raw.githubusercontent.com/ag-grid/ag-grid-docs/master/src/olympicWinners.json")
    .then(function(res){
        $scope.gridOptions.api.setRowData(res.data);
    });
}

https://plnkr.co/edit/PKTiFpd9WM1UeELT72ht?p=preview

Answer 2

您的 gridOptions 变量未在您的 $scope 上定义，但您正试图通过 onGridReady 函数中的范围访问它。

试试这个：

$scope.gridOptions = {
  columnDefs: columnDefs,
  enableColResize: true,
  rowBuffer:0,
  enableSorting: true,
  enableFilter: true,
  rowHeight: 30,
  headerHeight: 35,
  sizeColumnsToFit: true,
  onGridReady: function () {
    setTimeout( function(){
                        $scope.gridOptions.api.setRowData(rowData);
                    },5000);
   },
   suppressLoadingOverlay: true,
   pagination: true
 };
});

setRowData 未将数据加载到网格中

setRowData not loading the data in to the grid

angularjs

ag-grid