角度uiグリッドは、行と列のないグリッドコンテナを表示します。

Question

アプリケーションで最初に角度uiグリッドを試していますが、期待通りに動作させることができません。テスト用のサンプル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テーブルを使ってデータと表示されたデータを表示することで確認しました。どうしたらいいですか？

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; 
    }); 
}