javascript - 异步服务调用后 ngHandsontable 数据行未定义

Question

我有一个简单的 Controller ，可以调用 ajax 来获取 ngHandsontable 的表数据，但是 datarows值为 undefined .

var app = angular.module('propnet', [
    'ngRoute',
    'ngHandsontable'
]);
// configure our routes
app.config(function($routeProvider)
{
    $routeProvider.    
    // route for the about page
    when('/property/:prop_id',
    {
        templateUrl: 'pages/property.html',
        controller: 'propertyController'
    })
...

app.controller('propertyController', function($scope, $routeParams, $http, $log)
{
    $http.get('api/Transactions/property/' + $routeParams.prop_id).success(function(data)
    {
        $scope.transactions = data;
        $log.log("Got some txns" + data);
    });

});

pages/property.html :

<div class="row">{{ transactions }}</div>
<div class='row'>
    <hot-table col-headers="showColHeaders" datarows="transactions">
        <hot-column data="itemName" title="'Name'" type="'text'" read-only></hot-column>
         <hot-column data="amount" title="'Amount'" type="'numeric'" format="'$ 0,0.00'" read-only></hot-column>
         <hot-column data="date" title="'Date'" type="'date'" dateFormat="'YYYY-MM-DD'"></hot-column>
         <hot-column data="vendorName" title="'Vendor'"></hot-column>
         <hot-column data="notes" title="'Notes'"  width="150" ></hot-column>
    </hot-table>
</div>

{{ transactions }}打印服务调用返回的值，但是 <hot-table>为空，并且 ngHandsontable 抛出错误(多次):

Got some txns[object Object],[object Object],[object Object],[object Object]

angular.js:12477 TypeError: Cannot read property 'length' of undefined
    at Object.fn (ngHandsontable.js:253)
    at Scope.$digest (angular.js:15826)
    at Scope.$apply (angular.js:16097)
    at done (angular.js:10546)
    at completeRequest (angular.js:10744)
    at XMLHttpRequest.requestLoaded (angular.js:10685)(anonymous function) @ angular.js:12477(anonymous function) @ angular.js:9246Scope.$digest @ angular.js:15844Scope.$apply @ angular.js:16097done @ angular.js:10546completeRequest @ angular.js:10744requestLoaded @ angular.js:10685

为什么不是 $scope.transactions绑定(bind)到 datarows ？

相关:ngHandsontable shows no content on rest service call

Answer 1

在您的 Controller 中初始化 $scope.transactions = []。最初当 handsontable 尝试绑定(bind)数据时 $scope.transactions 是未定义的。因此，首先对其进行初始化有助于消除错误。一旦 GET 方法返回数据 handsontable 将用数据填充表。