Я получаю ниже ошибку при использовании ui-grid в angular js

var app = angular.module("finApp", ["ui.grid"]);
app.controller(
  "finController",
  function($scope, $http) {
    $http.get("url", "data")
      .then(function(response) {
        $scope.gridOptions.data = response.data;

      }, function(errorResponse) {});
  });
<link href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.css" rel="stylesheet"/>
<script src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/master/ui-grid.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ui-grid="gridOptions" class="grid"></div>

При выполнении выше кода я получаю ниже ошибки:

угловатый.минута.js: 122 TypeError: не удается прочитать свойство ‘data’ неопределенного
at new (ui-grid.js: 3330)
на объектах.invoke (angular.минута.js: 43)
at Q. экземпляр (angular.минута.js: 93)


3 ответа

  1. Попробовать это :

    при успешном ответе от API только concatданные ответа в gridDataмассив. As gridDataназначается обратно к $scope.gridOptions.dataединственному.

    --------
    JS file 
    --------
    
    $scope.gridOptions = {
        data: 'gridData',
        ..........,
        ..........,
        ..........
    }
    
    $scope.gridData = [];
    
    $scope.gridData = $scope.gridData.concat(response.data);
    
  2. Проверка ответа по журналу или оповещению

    или определите столбец grids, как показано ниже, чтобы проверить, работает ли ui-grid:

    $scope.gridOptions = {
        paginationPageSizes: [10, 20, 50],
        paginationPageSize: 10,
        enableColumnMenus: false,
        columnDefs: [
    
        {
            width: '10%',
            field: 'lastname',
            displayName: 'Last Name'
        },
    
        {
            width: '25%',
            field: 'firstname',
            displayName: 'First Name'
        },
         {
             width: '8%',
             field: 'Status',
             displayName: 'Status'
         },
        {
            width: '6%',
            field: "actions",
            displayName: "Actions",
            cellTemplate: '<a href="#" title="test"  class="Icon"></a>'
        }
        ]
    };
    

    И в JS

    var app = angular.module("finApp", ["ui.grid"]);
        app.controller(
                "finController",
                function($scope,$http){
                    $http.get("url","data")
                        .then(function(response) {
                            $scope.gridOptions.data =response.data;
    
                    },function(errorResponse) {
           });
        });
    

    См. это: UI GRID