UI Grid Angular，网格呈现但不显示数据答案

【问题标题】：UI Grid Angular, grid renders but doesn't display dataUI Grid Angular，网格呈现但不显示数据
【发布时间】：2015-02-11 06:00:51
【问题描述】：

我在这里缺少什么？网格渲染没有错误，空白行...我检查过，到目前为止，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>

截图

【问题讨论】：

你能提供一个响应数据的例子吗？
@Phil 我用响应数据更新了问题。

标签： angularjs angular-ui-grid

【解决方案1】：

我想通了，看来我的问题是两件事的混合。

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

在示例中，它使用了 gridOptions.data 中名为 myData 的字符串值，它引用了您范围内要观察的对象。所以我所做的只是在 GET 请求完成后推送每一行。

完整的例子是Here via Punklr。

【讨论】：

【解决方案2】：

对我来说，下面的代码有效，一旦我更改数据，我就会调用下面的代码

if ($scope.gridApi ) {
       $scope.$timeout(() => {
          $scope.gridApi.core.handleWindowResize();
          $scope.gridApi.grid.refresh();
       }, 10);
}

【讨论】：

【解决方案3】：

您从响应中访问了错误的 JSON 数据（取自您的响应示例，数组不在“数据”名称中）。您的响应包含数据的无名数组，在您的代码中：

$scope.gridOptions.data = response['data'];

应该是：

$scope.gridOptions.data = response;

【讨论】：

实际上我正在访问响应对象中的数据属性。响应是一个由数据属性和其他组成的对象。 JSON 在数据中。如果我不使用response.data 或response['data']，那么我只是传递了完整的对象。
当使用响应承诺的then 方法时（正如 OP 所做的那样），回调函数的参数是整个响应对象。请参阅此处的“退货”部分~docs.angularjs.org/api/ng/service/$http#usage

【解决方案4】：

您可以像这样更改fieldId：

$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:[]
};

【讨论】：