ng (ui) 网格中未显示列值答案

【问题标题】：Column value not showing in ng (ui) gridng (ui) 网格中未显示列值
【发布时间】：2015-11-25 04:00:59
【问题描述】：

我在 HTML 中有一个如下的角度 ui-grid

<div id="grid1" ui-grid="gridOptions" ui-grid-edit class="grid"></div>

在 JS 中，我从 pouchdb 获取数据并将结果存储到一个对象中

    function find_users_by_name(name) {                                               

                    if( !name.id ) { // This is not a callback from 'db.change'
                        myId = name;  
                        oldId = name;
                    }
                    else  // This is called from db.change
                        myId = oldId;                              

                    db.query('idx/bypin', {
                        key: myId,
                        include_docs: true
                    }).then(function(result) {
                       $scope.todo =  result.rows; 
                    }).catch(function(err) {
                        // handle errors
                        alert('not found');
                    }); 

               $scope.gridOptions = { enableSorting: true, enableColumnResizing:true };
                $scope.gridOptions.data = $scope.todo;

               $scope.gridOptions.columnDefs = [

                        {name: 'Address1',field: "Address1"},
                        {name: 'Address2',field: "Address2"}

                        ];  
            }

但是，网格创建时没有。结果中的行数，只显示列标题，但我在任何数据中都找不到。

我在这里做错了什么？

TIA！

【问题讨论】：

标签： angularjs angular-ui-grid pouchdb

【解决方案1】：

对浏览器数据库的查询是异步的。如您所见，您正在使用 Promise。

您将待办事项分配给网格数据是在声明对浏览器数据库的调用之后立即进行的。

请将此赋值移到 then 函数中或声明另一个 then 并在那里执行下一步。

祝你好运

【讨论】：

我将网格绑定代码移到了不同的函数，但仍然是同样的问题......但是，我怀疑绑定对象是一个复杂的对象（我在原始问题中附上了屏幕截图）这就是为什么它没有约束力...
好吧，我不知道你是如何定义你的 Angular 服务的，所以这也可能是个问题。也请检查一下。

【解决方案2】：

在得到结果后尝试应用范围，但如果你在你用来获取数据的函数之外声明你的 ng-grid 应该会更好：

function MyCtrl($scope) {
    function find_users_by_name(name) {                                               
        if( !name.id ) { // This is not a callback from 'db.change'
            myId = name;  
            oldId = name;
        }
        else  // This is called from db.change
            myId = oldId;                              

        db.query('idx/bypin', {
            key: myId,
            include_docs: true
        }).then(function(result) {
            $scope.todo =  result.rows;
            // DO THIS
            if (!$scope.$$phase) {
                $scope.$apply();
            }
        }).catch(function(err) {
            // handle errors
            alert('not found');
        });  
    }

    $scope.gridOptions = { enableSorting: true, enableColumnResizing:true };

    $scope.gridOptions.data = $scope.todo;

    $scope.gridOptions.columnDefs = [
         {name: 'Address1',field: "Address1"},
         {name: 'Address2',field: "Address2"}            
    ]; 
}

【讨论】：

【解决方案3】：

db.query 函数是异步的。您必须在 db.query 函数中分配 gridoption.data：

function find_users_by_name(name) {                                               

                if( !name.id ) { // This is not a callback from 'db.change'
                    myId = name;  
                    oldId = name;
                }
                else  // This is called from db.change
                    myId = oldId;                              

  $scope.gridOptions = { enableSorting: true, enableColumnResizing:true };
  $scope.gridOptions.columnDefs = [

                    {name: 'Address1',field: "Address1"},
                    {name: 'Address2',field: "Address2"}

                    ];    

  db.query('idx/bypin', {
                    key: myId,
                    include_docs: true
                }).then(function(result) {
                   $scope.todo =  result.rows; 
                   $scope.gridOptions.data = $scope.todo;
                }).catch(function(err) {
                    // handle errors
                    alert('not found');
                }); 
        }

【讨论】：

【解决方案4】：

你也可以试试这个。

function find_users_by_name(name) {

if (!name.id) { // This is not a callback from 'db.change'
    myId = name;
    oldId = name;
} else // This is called from db.change
    myId = oldId;

db.query('idx/bypin', {
    key: myId,
    include_docs: true
}).then(function(result) {
    $scope.todo = result.rows;
    nowDoGridBinding();
}).catch(function(err) {
    // handle errors
    alert('not found');
});

$scope.gridOptions = {};
var nowDoGridBinding = function() {
    $scope.gridOptions = {
        enableSorting: true,
        enableColumnResizing: true,
        data: $scope.todo;
        columnDefs: [{
            name: 'Address1',
            field: "Address1"
        }, {
            name: 'Address2',
            field: "Address2"
        }];
    };
};

【讨论】：

【解决方案5】：

我知道现在给出答案已经很晚了。

<div id="grid1" ui-grid="{ data: todo }"></div>

这应该可以解决问题。这个对我有用。

【讨论】：

【解决方案6】：

我不知道这样做是否合适，但尝试一下。

function find_users_by_name(name) {

                if( !name.id ) { // This is not a callback from 'db.change'
                    myId = name;  
                    oldId = name;
                }
                else  // This is called from db.change
                    myId = oldId;                              

                db.query('idx/bypin', {
                    key: myId,
                    include_docs: true
                }).then(function(result) {
                   $scope.todo =  result.rows; 
                }).catch(function(err) {
                    // handle errors
                    alert('not found');
                }); 

           $scope.gridOptions = { enableSorting: true, enableColumnResizing:true };

           $scope.gridOptions.columnDefs = [

                    {name: 'Address1',field: "Address1"},
                    {name: 'Address2',field: "Address2"}

                    ];  
        }

 $timeout(function() {
     $scope.gridOptions.data = $scope.todo;
    //$scope.gridApi1.grid.refresh();
  }, 800);

【讨论】：