UI Grid Angular，网格渲染但不显示数据 [英] UI Grid Angular, grid renders but doesn't display data

问题描述

我在这里想念什么?网格呈现无错误，空白行...我检查了一下，JSON到目前为止已经很好了$scope.gridOptions.data = response['data'];好像它呈现了空数组，而且从不获取实际数据...

What am I missing here? The grid renders with no errors, blank rows... I checked and JSON is coming in fine up to this point $scope.gridOptions.data = response['data']; It seems like its rendering the empty array and never getting to the actual 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>

屏幕截图

推荐答案

我知道了，看来我的问题是两件事的结合.

I figured it out, and it appears that my problem was a mixture of two things.

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

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

1. The incoming JSON was a string, I'm not 100% sure if I needed to convert to an object by using JSON.parse then pass it along to the $scope.gridOptions.data but that could've been the issue for the code I posted in my original question above.

2. After more research I found a great in-depth example in the official Angular UI Grid docs. Following this technique i was able to get the data rendered correctly.

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

在示例中，它使用了名为myData的gridOptions.data中的字符串值，该字符串值引用要观察的作用域上的对象.因此，我正在做的就是在GET请求完成后立即推送每一行.

In the example it makes use of a string value in gridOptions.data called myData which refers to an object on your scope to watch. So what I'm doing is just pushing each row once the GET request completes.

完整的示例是通过Punklr 此处.

The full example is Here via Punklr.

这篇关于UI Grid Angular，网格渲染但不显示数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！