javascript - 根据 promise 的结果将列添加到动态 ng-table

Question

我最近一直在使用 ngTableDynamic 指令，当我确切知道我的表应该包含哪些列时，它的效果很好。但是，当我的表真正是动态的并且我事先不知道预期的列数或类型时，我遇到了问题。

在我的 Controller 顶部，我声明我知道的列将出现在每个表中:

$scope.columns = [
  { title: 'ID', field: 'id', visible: true, required: true },
  { title: 'Email', field: 'email', visible: true, required: true }
];

然后我对返回结果的服务进行异步调用。基于这些结果，我将任何其他列对象推送到 $scope.columns:

var getResults = function() {
  var defer = $q.defer();
  reportService.getReportResults({
    report: $scope.id,
    version: $scope.version
  }).$promise.then(function(data) {
    $scope.data = data.results;
    _.each($scope.data[0], function(value, key) {
      if (key !== 'id' && key !== 'email') {
        $scope.columns.push({
          title: _str.capitalize(key),
          field: key,
          visible: true,
          required: false
        });
      }
    });
    defer.resolve($scope.data);
  });
  return defer.promise;
};

但是，当我在浏览器中查看时，_.each 中推送的列永远不会出现在我的表中。但是，如果我用示例数据集的硬编码模拟替换我的异步调用，则会添加列并且一切都按预期工作:

var getResults = function() {
  var defer = $q.defer();
  $scope.data = [{"id":"1","email":"test@sample.com",,"create_date":"2013-09-03T09:00:00.000Z"},{"id":"2","email":"sample@test.org","create_date":"2013-09-03T11:10:00.000Z"}];
  _.each($scope.data[0], function(value, key) {
    if (key !== 'id' && key !== 'email') {
      $scope.columns.push({
        title: _str.capitalize(key),
        field: key,
        visible: true,
        required: false
      });
    }
  });
  defer.resolve($scope.data);
  return defer.promise;
};

在我的 Controller 中进一步向下调用我的初始化代码

getResults().then(function() {
  $scope.tableParams.reload();
});

$scope.tableParams = new ngTableParams({...

我的假设是，一旦 promise 得到解决，$scope.tableParams.reload(); 就会在 $scope.columns 更新之前被调用。

Answer 1

基于 demo从文档来看，这完全是用 promise 来做例子。似乎您必须在收到 promise 的响应后创建新的 tableParams 和 cols 对象。向现有列添加行可能不会触发观察器。

angular.module('app', ['ngTable']);

angular.module('app').controller('Demo', function($scope, NgTableParams, dataService) {
  $scope.cols = [{
    title: 'ID',
    field: 'id',
    visible: true
  }, {
    title: 'Email',
    field: 'email',
    visible: true
  }, {
    title: 'Create Date',
    field: 'create_date',
    visible: true
  }];
  
  dataService
    .getData()
    .then(function (response) {
      $scope.tableParams = new NgTableParams({}, {
        dataset: response.results
      });
      $scope.cols = $scope.cols.concat(response.cols);
    });
});

angular.module('app').factory('dataService', function($timeout) {
  return {
    getData: function() {
      return $timeout(function() {
        var n = Math.round(Math.random() * 50) + 5;
        var results = [];

        for (var i = 0; i < n; i++) {
          results.push({
            id: Math.random(),
            email: 'ex' + Math.random() + '@example.com',
            create_date: new Date(),
            x: Math.round(Math.random() * 10),
            y: Math.round(Math.random() * 25)
          });
        }

        return {
          results: results,
          cols: [
            {
              title: 'X',
              field: 'x',
              visible: true
            },
            {
              title: 'Y',
              field: 'y',
              visible: true
            }
          ]
        };
      }, 500);
    }
  };
});

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.2/angular.js"></script>
<link rel="stylesheet" href="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://rawgit.com/esvit/ng-table/master/dist/ng-table.min.js"></script>

<div ng-app="app" ng-controller="Demo">
  <table ng-table-dynamic="tableParams with cols" class="table table-condensed table-bordered table-striped">
    <tr ng-repeat="row in $data">
      <td ng-repeat="col in $columns">{{row[col.field]}}</td>
    </tr>
  </table>
</div>