setRowData 未将数据加载到网格中答案

【问题标题】：setRowData not loading the data in to the gridsetRowData 未将数据加载到网格中
【发布时间】：2018-09-09 18:11:56
【问题描述】：

我正在使用 ag-grid 将值显示到网格中。但是使用 setRowData 不会将值加载到网格中。下面是我在 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
 };
});

【问题讨论】：

标签： angularjs ag-grid

【解决方案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

【讨论】：

嗨，koolhuman，它不起作用。我是否需要将数据更改为数组，因为我读到 setRowData 只接受数组。
您的 rowdata 已经是一个数组 - var rowData = [ {custName: "A", address: "xyz", phNo: '123-123-1234'}, {custName: "B",地址：“lmn”，电话号码：'345-456-5672'}，{custName：“C”，地址：“pqr”，电话号码：'903-456-2345'}]；我已经添加了答案的链接
嗨，koolhuman，谢谢它的工作。现在，当我尝试从数据库加载值时，我没有看到 ag-grid 正在填充数据。
@GrailsLearner - 你是如何从数据库中填充数据的？我已经更新了从数据库中获取的答案。
function getData(){ MF3HTTPService.get('personallink').then(function(data){ if(data.status >= 200 && data.status

【解决方案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
 };
});

【讨论】：