Question

当我将数据加载到Ui-grid时，出现此错误colDef.name or colDef.field property is required

我没有在互联网上找到解决这个问题的解决方案。

这是我填充网格的功能：

 $scope.ApiGet = function () {
    $.ajax({
        url: //an url,
        async: false,
        type: 'POST',
        dataType: 'json',            
        success: function (data, textStatus, xhr) {
            var token = data.access_token;
            console.log(token);
            $.ajax({
                url: //an other url
                async: false,
                crossDomain: true,
                type: "GET",
                datatype: "json",                    
                success: function (datas, textStatus, request) {
                    console.log(datas[0].previewContent);                        
                    angular.forEach(datas, function (value) {
                        console.log(value);
                        debugger;
                        if (value) {
                            $scope.rowCollection = $scope.rowCollection.concat(value.previewContent);
                        }

                    })
                   // console.log($scope.rowCollection);
                },
                error: function (jqXHR, textStatus, errorThrown) {

                    // $scope.addAlert(jqXHR.responseText != "" ? jqXHR.responseText : jqXHR.statusText);
                }
            })

和Html

<div ng-controller="listCtrl" ng-init="ApiGet()"> 
    <div ui-grid="{ data: rowCollection }" class="myGrid"></div>
</div>

Answer 1

由于您使用jquery AJAX发送http请求，因此可能会停止角度摘要周期。所以即使你分配$scope.rowCollection值，它也不会绑定到html。

您可以做的一件事是在http响应

之后使用$scope.$apply()启动摘要周期

 success: function(datas, textStatus, request) {
     console.log(datas[0].previewContent);
     angular.forEach(datas, function(value) {
         console.log(value);
         debugger;
         if (value) {
             $scope.rowCollection = $scope.rowCollection.concat(value.previewContent);
         }

     })
     $scope.$apply();
 },

OR

您可以使用$http代替$.ajax发送http请求

Answer 2

我找到了解决方案：

定义一个

$scope.gridOptions {data:mydata, 
                    columnDefs:[{field:'field1',displayName:'Field1", width:"*"},
                                {field:'field2',displayName:'Field2", width:"*"}]

然后在Html中：

 <div ng-controller="listCtrl" ng-init="ApiGet()"> 
    <div ui-grid="gridOptions" class="myGrid"></div>
 </div>

ui-grid column definiton错误

2 个答案: