UI Grid Angular，网格呈现但不显示数据 [英] UI Grid Angular, grid renders but doesn't display data
问题描述
我在这里错过了什么?网格呈现没有错误，空白行......我检查过，到目前为止 JSON 很好 $scope.gridOptions.data = response['data']; 它似乎是它的呈现空数组，永远不会得到实际数据...
app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {$scope.myData = [];$scope.loading = true;$scope.gridOptions = {启用排序:真，列定义:[{名称:'Id'，字段:'PK_Inspection'}，{ 名称:'员工 ID'，字段:'员工 ID' },{名称:'员工姓名'，字段:'员工姓名'}，{名称:'设备ID'，字段:'设备ID'}，{名称:'设备名称'，字段:'设备名称'}，{名称:'序列'，字段:'序列名称'}，{名称:'详细信息'，字段:'序列详细信息'}，{名称:'类型'，字段:'序列类型名称'}，{名称:'Shift'，字段:'ShiftName'}，{名称:'状态'，字段:'状态名称'}],数据:[]};$http.get('/Home/GetAllData').then(功能(响应){$scope.gridOptions.data = response['data'];}).catch(函数(错误){$scope.loading = false;console.log("接收数据出错.");}).finally(函数(){$scope.loading = false;控制台日志($scope.gridOptions.data)；});}]);传递给$scope.gridOptions.data的数据:
这是 HTML:
<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>截图
我想通了，看来我的问题是两件事的混合.
- 传入的 JSON 是一个字符串，我不确定是否需要使用
JSON.parse将其转换为对象，然后将其传递给$scope.gridOptions.data但这可能是我在上面的原始问题中发布的代码的问题. 经过更多研究，我在官方 Angular UI Grid 文档中找到了一个很好的深入示例.按照这种技术，我能够正确呈现数据.
var rowCount = 0;变量 i = 0;$scope.refreshData = 函数 () {$scope.loading = true;$scope.myData = [];$http.get('/Home/GetAllData').成功(功能(响应){var jsonObj = JSON.parse(response);rowCount = jsonObj.length;jsonObj.forEach(函数(行){row.id = i;我++;$scope.myData.push(row);});$scope.loading = false;}).错误(功能(){$scope.loading = false;console.log("检索数据出错.");});};
在示例中，它使用了 gridOptions.data 中名为 myData 的字符串值，它指的是您范围内要监视的对象.所以我所做的只是在 GET 请求完成后推送每一行.
完整示例是此处来自 Punklr.
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);
});
}]);
Data being passed over to $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"
}
]
Here's the 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>
Screenshot
I figured it out, and it appears that my problem was a mixture of two things.
- The incoming JSON was a string, I'm not 100% sure if I needed to convert to an object by using
JSON.parsethen pass it along to the$scope.gridOptions.databut that could've been the issue for the code I posted in my original question above. 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."); }); };
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.
The full example is Here via Punklr.
这篇关于UI Grid Angular，网格呈现但不显示数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
