Angular ui-grid 显示没有行和列的网格容器

Question

我第一次在应用程序上尝试 Angular ui-grid，但无法使其按预期工作。我创建了一个示例 JSON 数据进行测试，它很好地显示了包含所有数据的网格。但是当我决定尝试使用我数据库中的真实数据时，它显示了一个没有行和列的空网格内容。

HTML

<div ui-grid="gridOptions" ui-grid-pagination style="width: 100%; height: 400px"></div>

App.js

(function() {
    angular.module('app').controller('app.views.users.index', [
        '$scope', '$modal', 'abp.services.app.user',
        function ($scope, $modal, userService) {

            $scope.usersList = [];

            $scope.gridOptions = {
                //grid pagination
                paginationPageSizes: [10, 25, 50, 75],
                paginationPageSize: 10,
                enableSorting: true,
                //enabling filtering
                enableFiltering: true,
                //column definations
                //we can specify sorting mechnism also
                ColumnDefs: [
                    { name: 'Username', field: 'username' },
                    { name: 'Full Name', field: 'fullName' },
                    { name: 'Email Address', field: 'emailAddress' },
                    { name: 'Active' ,field: 'isActive', enableFiltering: false }
                ],
            };
            //api that is called every time
            // when data is modified on grid for sorting
            $scope.gridOptions.onRegisterApi = function (gridApi) {
                $scope.gridApi = gridApi;
            }


            function getUsers() {
                userService.getUsers({}).success(function (result) {
                    $scope.usersList = result.items;
                });
            }
            //Bind data to grid
            $scope.gridOptions.data = $scope.usersList;

        }
    ]);
})();

是的，返回的数组对象中有数据。我通过使用简单的 html table 来显示数据和显示的数据来确认它。请问我错过了什么？

Answer 1

问题是 GetUsers() 有一个异步回调，所以程序继续到下一行 - $scope.gridOptions.data = $scope.usersList 在执行回调之前。因此没有数据绑定。

您需要做的是在 success 函数中设置 gridOptions.data：

function getUsers() {
  userService.getUsers({}).success(function (result) {
    $scope.usersList = result.items;
    //Bind data to grid
    $scope.gridOptions.data = $scope.usersList;
  });
}

Angular ui-grid 显示没有行和列的网格容器

Angular ui-grid displays the Grid Container Without Rows & Columns

angularjs

angular-ui-grid