Question

我正在尝试从返回promise的服务调用中加载ngHandsontable下拉列表和自动更正控件。当我从静态数据加载这些控件时，它们工作正常，但是当我尝试从异步调用加载它们时控件是空的。

此plunker http://embed.plnkr.co/DQKBZK/有一个工作正常的示例表。它加载了静态数组。第二个表能够从promise中加载表行的数据，但我无法通过这种方式加载下拉列表或自动完成控件。如果您能提供任何建议或建议，我将不胜感激。代码段：

在模板中，两个表看起来都很相似，这是动态的：

  <hot-table datarows="dctrl.dynamicData" settings="dctrl.dynamicSettings">
    <hot-column type="text" title="'Id'" data="myid"></hot-column>
    <hot-column source="dctrl.dynamicWeather" type="'dropdown'" title="'Weather'" data="weather"></hot-column>
    <hot-column type="'autocomplete'" title="'Menu'" data="menu">
      <hot-autocomplete datarows="{{dctrl.dynamicMenu}}"></hot-autocomplete>
    </hot-column>
  </hot-table>

控制器使用服务提供的静态数据加载第一个表和控件：

vm.staticData = DemoService.staticData;
vm.staticWeather = DemoService.staticWeather;
vm.staticMenu = DemoService.staticMenu;

服务提供的静态数据：

  staticData: [
    {"myid": "1", "weather": "Cloudy", "menu": "Cheese"},
    {"myid": "2", "weather": "Sunny", "menu": "Turnips"}
  ],
  staticWeather: ['Cloudy', 'Sunny', 'Rainy'], // dropdown
  staticMenu: ['Beans', 'Cheese', 'Turnips'].join(','), // autocomplete

动态数据由简单的JSON文件通过服务调用提供。因此，对于天气下降，我们在控制器中有这个：

vm.dynamicWeather = [];

DemoService.getDynamicWeather()
  .then(function successCallback(results) {
    vm.dynamicWeather = results;
  });

以下是该服务提供的动态天气数据：

  getDynamicWeather: function() {
    var def = $q.defer();
    $http.get('weather.json')
      .then(function successCallback(response) {
        var i, responseArray = [];
        for (i = 0; i < response.data.length; i++) {
          responseArray.push(response.data[i].weather);
        }
        def.resolve(responseArray);
      });
      return def.promise;
  },

JSON天气数据文件：

[
  {"weather": "Cloudy"}, 
  {"weather": "Sunny"},
  {"weather": "Rainy"}
]

我一直在用这个东西捣乱一段时间，没有太大的成功。我尝试过的事情包括将调用放在$ timeout（触发摘要周期），获取handontable的实例并强制渲染，使用对象而不是数组，以及使用函数调用来加载下拉数据。我已经多次成功地加载了两次数据，或者根本没有加载数据，或者（通过函数调用）获得动手进入无聊的循环，导致浏览器崩溃。任何您能提供的建议都将不胜感激，谢谢。

Answer 1

在实例化表之后，绝对可以添加值：

<button ng-click="dctrl.staticWeather.push('123')">Add data</button>
<div>{{x}} {{dctrl.staticWeather}}</div>

我建议使用angular $ resource服务使用的模式： - 在load函数中声明一个空数组 - 在$ http承诺中，将已解析的数据复制到先前分配的数组中 - 在解析promise之前返回数组

设定： vm.dynamicWeather = DemoService.getDynamicWeather（）;

和

    getDynamicWeather: function() {
     var responseArray = [];

    $http.get('weather.json')
      .then(function successCallback(response) {
        var i;
        for (i = 0; i < response.data.length; i++) {
          responseArray.push(response.data[i].weather);
        }
      });
      return responseArray;
  }

Answer 2

要将动态数据加载到下拉列表中，您可以使用source属性，而不是使用自动填充功能使用type ='dropdown'。

您可以点击下面的链接参考该示例 View Example 解决方案与文档提供的解决方案不同。

ngHandsontable将动态数据加载到下拉列表或自动填充字段

2 个答案: