Angular中ag-grid的setRowData无法加载数据至网格的问题

嘿，我来帮你搞定这个ag-grid加载数据的问题！你遇到的api未定义错误，本质是ag-grid还没完成初始化，你就着急调用setRowData了——用setTimeout虽然可能蒙对，但真的不是靠谱的解决办法，谁知道网格初始化要花多久呢？下面给你两个更稳妥的方案：

方法1：用ag-grid自带的onGridReady回调（最推荐） #

ag-grid专门提供了onGridReady事件，等网格完全初始化好、API可以正常调用的时候，它会自动触发这个回调。这时候再调用setRowData，绝对不会报错。

修改你的代码如下：

HTML部分 #

<html>
<head>
    <!-- 别忘了引入ag-grid的CSS和JS文件，不然网格没法正常渲染 -->
    <link rel="stylesheet" href="ag-grid.css">
    <link rel="stylesheet" href="ag-theme-fresh.css">
    <script src="angular.js"></script>
    <script src="ag-grid-angular.min.js"></script>
</head>
<body ng-app="myApp" ng-controller="CustController as custCtrl">
    <div ag-grid="custCtrl.gridOptions" id="myGrid" style="height: 115px;width:500px;" class="ag-fresh"></div>
</body>
</html>

JS部分 #

var app = angular.module('myApp', ['agGrid']);

app.controller('CustController', function() {
    var vm = this;

    // 先定义好你的列配置，根据实际数据调整
    vm.gridOptions = {
        columnDefs: [
            { headerName: "列名1", field: "col1" },
            { headerName: "列名2", field: "col2" }
        ],
        // 网格就绪时自动触发这个函数
        onGridReady: function(params) {
            // 先把API存起来，以后想操作网格都能用
            vm.gridApi = params.api;
            // 现在可以放心加载数据啦
            var rowData = [
                { col1: "测试数据1", col2: "内容A" },
                { col1: "测试数据2", col2: "内容B" }
            ];
            vm.gridApi.setRowData(rowData);
        }
    };

    // 如果你的数据是从后端接口异步获取的，也可以这么写
    /*
    $http.get('/你的接口地址').then(function(response) {
        // 确保API已经初始化完成再调用
        if(vm.gridApi) {
            vm.gridApi.setRowData(response.data);
        }
    });
    */
});

方法2：先存数据，等API就绪再加载（适合异步数据场景） #

如果你的数据是通过接口请求获取的，可能数据先回来了，但网格还没初始化好。这时候可以先把数据存起来，等网格就绪后再加载：

app.controller('CustController', function($http) {
    var vm = this;
    var savedRowData = null; // 用来临时存数据

    vm.gridOptions = {
        columnDefs: [/* 你的列配置 */],
        onGridReady: function(params) {
            vm.gridApi = params.api;
            // 如果数据已经提前拿到了，直接加载
            if(savedRowData) {
                vm.gridApi.setRowData(savedRowData);
            }
        }
    };

    // 异步请求数据
    $http.get('/你的接口地址').then(function(response) {
        savedRowData = response.data;
        // 如果API已经就绪，直接加载数据
        if(vm.gridApi) {
            vm.gridApi.setRowData(savedRowData);
        }
    });
});

为啥不推荐用setTimeout？ #

• 你根本没法精准控制超时时间，设短了还是会报错，设长了用户要白等半天。
• 代码很脆弱，换个性能差点的设备就可能失效，完全依赖运气可不行。

内容的提问来源于stack exchange，提问作者GrailsLearner