angularjs – UI网格角度,网格渲染但不显示数据

发布时间：2020-12-17 06:55:08 所属栏目：安全来源：网络整理

导读：我在这里错过了什么？网格呈现没有错误,空行…我检查了 JSON到目前为止罚款$scope.gridOptions.data = response [‘data’];看起来它渲染空数组并且永远不会得到实际数据…… app.controller('MainCtrl',['$scope','$http',function ($scope,$http) { $scope

我在这里错过了什么？网格呈现没有错误,空行…我检查了 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,"SequenceName": "UNIT 2","SequenceDetails": "Charge,Water Levels,Vent Caps in place,Power Disconnect works.","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>

截图

解决方法

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

>传入的JSON是一个字符串,我不是100％确定我是否需要通过使用JSON.parse转换为对象然后将其传递给$scope.gridOptions.data但这可能是问题所在我在上面的原始问题中发布的代码.
>经过更多的研究,我在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.");
        });
 };

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

完整的例子是通过Punklr的Here.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!