UI網格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請求完成後推送每一行。

完整的示例是Here通過Punklr。

Answer 2

您從響應訪問錯誤的JSON數據（取自您的響應示例，數組不在'數據'名稱中）。您的回答有沒有名字的陣列數據，在你的代碼中做到：

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

它應該是：

$scope.gridOptions.data = response; 

Answer 3

可以更改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:[] 
};