列值未显示在ng（ui）网格中

Question

我在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！

Answer 1

对浏览器数据库的查询是异步的。正如你所看到的，你正在使用承诺。

在声明对浏览器数据库的调用之后，您立即将todo分配给网格数据。

请在then函数中移动此作业或声明另一作业，然后在那里执行下一步。

祝你好运

Answer 2

Try to apply the scope after getting the results, but it should be better if you declare your ng-grid outside the function you use to get the data:

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"}            
    ]; 
}

Answer 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');
                }); 
        }

Answer 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"
        }];
    };
};

Answer 5

我知道答案很晚。

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

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

Answer 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);