UI Grid Angular,网格渲染但不显示数据

Question

我在这里错过了什么？网格呈现没有错误,空白行......我检查了JSON到目前为止很好看$scope.gridOptions.data = response['data'];它似乎渲染空数组并且永远不会得到实际数据...

  app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {
        $scope.myData = [];
        $scope.loading = true;

        $scope.gridOptions = {
            enableSorting: true,
            columnDefs: [
              { name: 'Id', field: 'PK_Inspection' },
              { name: 'Employee Id', field: 'EmployeeId' },
              { name: 'Employee Name', field: 'EmployeeName' },
              { name: 'Equipment Id', field: 'EquipmentId' },
              { name: 'Equipment Name', field: 'EquipmentName' },
              { name: 'Sequence', field: 'SequenceName' },
              { name: 'Details', field: 'SequenceDetails' },
              { name: 'Type', field: 'SequenceTypeName' },
              { name: 'Shift', field: 'ShiftName' },
              { name: 'Status', field: 'StatusName' }
            ],
            data:[]
        };

        $http.get('/Home/GetAllData')
            .then(function (response) {
                $scope.gridOptions.data = response['data'];
            })
            .catch(function (err) {
                $scope.loading = false;
                console.log("Error Receiving Data.");
            })
            .finally(function () {
                $scope.loading = false;
                console.log($scope.gridOptions.data);

            });

    }]);

数据被传递给$scope.gridOptions.data:

[
    {
        "PK_Inspection": 1,
        "EmployeeId": "4433112",
        "EmployeeName": "",
        "EquipmentId": "1122113",
        "EquipmentName": "",
        "SequenceName": "UNIT 1",
        "SequenceDetails": "Bent, Dented, Broken, Torn or Deformed Parts.",
        "SequenceTypeName": "Visual Inspection",
        "ShiftName": "Day",
        "StatusName": "OK"
    },
    {
        "PK_Inspection": 2,
        "EmployeeId": "4433112",
        "EmployeeName": "",
        "EquipmentId": "1122113",
        "EquipmentName": "",
        "SequenceName": "UNIT 2",
        "SequenceDetails": "Charge, Water Levels, Vent Caps in place, Power Disconnect works.",
        "SequenceTypeName": "Visual Inspection",
        "ShiftName": "Day",
        "StatusName": "OK"
    }
]

这是HTML:

<div ng-controller="MainCtrl">
    <i class="fa fa-spinner fa-spin text-center" ng-show="loading"></i>
    <div id="mainGrid" ui-grid="gridOptions" ui-grid-edit class="myGrid"></div>
</div>

截图

Answer 1

我想通了,看来我的问题是两件事的混合.

1. 传入的JSON是一个字符串,我不是100%确定我是否需要通过使用转换为对象JSON.parse然后传递给它,$scope.gridOptions.data但这可能是我在上面的原始问题中发布的代码的问题.

2. 经过更多的研究,我在Angular UI Grid官方文档中找到了一个很好的深度示例.遵循这种技术,我能够正确地呈现数据.

   var rowCount = 0;
   var i = 0;
   $scope.refreshData = function () {
       $scope.loading = true;
       $scope.myData = [];
   
       $http.get('/Home/GetAllData')
           .success(function (response) {
               var jsonObj = JSON.parse(response);
               rowCount = jsonObj.length;
   
               jsonObj.forEach(function (row) {
                   row.id = i; i++;
                   $scope.myData.push(row);
               });
               $scope.loading = false;
   
           })
           .error(function() {
               $scope.loading = false;
               console.log("Error retrieving data.");
           });
    };
   

在该示例中,它使用gridOptions.data中的字符串值,该字符串值myData引用要观察的作用域上的对象.所以我正在做的只是在GET请求完成后推送每一行.

完整的例子就是在这里通过Punklr.