ngHandsontable：异步加载数据源和绑定不适用于 Angular

Question

我有一个 handsontable，我在其中异步加载数据，在我的示例中我模拟了 3 秒的延迟。

这是 table，其中 settings="ctrl.settings":

  <hot-table col-headers="true" settings="ctrl.settings">
    <hot-column data="id" title="'ID'" read-only></hot-column>
    <hot-column data="name.first" title="'First Name'"></hot-column>
    <hot-column data="name.last" title="'Last Name'"></hot-column>
    <hot-column data="address" title="'Address'"></hot-column>
    <hot-column data="price" title="'Price'" type="'numeric'" format="'$ 0,0.00'"></hot-column>
    <hot-column data="isActive" title="'Is Active'" type="'checkbox'" checked-template="'Yes'" unchecked-template="'No'"></hot-column>
  </hot-table>

控制器是这样的，你可以看到我是这样设置数据源的data: _this.delayedData,:

function MainCtrl(dataFactory) {
  var _this = this;  
  _this.data = dataFactory.generateArrayOfObjects();  
  _this.delayedData = []; // this will be filled with a delay

  this.settings = {
    // data: _this.data,
    data: _this.delayedData,
    dataSchema: this.data
  }
  this.columns = [
    {
      data: 'id',
      title: 'ID',
      readOnly: true
    },
    {
      data: 'price',
      title: 'Price',
      readOnly: false
    }
  ];


  // here the data is loaded with a delay of 3 seconds
  // and the table is then rendered again 
  setTimeout(function(){ 
      _this.delayedData = _this.data; 
      console.log('Setting delayed values ' + JSON.stringify(_this.delayedData));    

      // get instance of table and re-render
      var hotDiv = angular.element($('hot-table'));
      if (hotDiv!==undefined && hotDiv.isolateScope()!==undefined) {
          var hotInstance = hotDiv.isolateScope().hotInstance;
          if (hotInstance!==undefined) {
              hotInstance.render();
              console.log("=========================");
              console.log('Rendered but not showing in the table! Why?');
              console.log("========================="); 
          }
      }    

  }, 3000);

}

JS斌： http://jsbin.com/daniyov/edit?html,js,console,output

因此在控制器中定义 table 之后，数据加载有点延迟。根据 handsontable 文档，只要数据发生变化，就应该调用 table 的 render() 方法，例如 example of the documentation.

我确实在控制台中看到了 "Render!" 输出，因此确实调用了这段代码，但是，这些项目没有显示在 table。

我创建的一个类似示例，但没有 Angular / Angular 指令，可以这样工作：http://jsfiddle.net/mathiasconradt/L4z5pbgb/ 只是使用 Angular / ngHandsontable，我无法让它工作。

=====更新=====

我在 JS Bin 更新了示例：http://jsbin.com/daniyov/edit?html,js,console,output 并进行了更多调试。我更新了模拟数据源延迟加载的函数如下：

  // here the data is loaded with a delay of 3 seconds
  // and the table is then rendered again 
  setTimeout(function(){ 
      _this.delayedData = _this.data; // assigning data here!

      // get instance of table and re-render
      var hotDiv = angular.element($('hot-table'));

      if (hotDiv!==undefined && hotDiv.isolateScope()!==undefined) {

          console.log("=========================");
          console.log('DEBUG OUTPUT');
          console.log("=========================");
          console.log('Found table DOM element: ' + hotDiv.attr("id"));

          var hotInstance = hotDiv.isolateScope().hotInstance;
          if (hotInstance!==undefined) {

              // let's see if the reference
              console.log('Columns in this table: ' + hotInstance.countCols());
              console.log('Rows in this table: ' + hotInstance.countRows());

              console.log('Table source data length: ' + hotInstance.getSourceData().length);
              console.log('delayedData length: ' + _this.delayedData.length); 

              console.log("=========================");
              console.log('Why does delayedData have a length of ' + _this.delayedData.length);
              console.log('and the table source data a length of ' + hotInstance.getSourceData().length);
              console.log('if it IS the data source of the table?');
              console.log("=========================");    

              hotInstance.render(); 
          }
      }    

  }, 3000);

我分配给 table 的数据源似乎并没有真正包含对我分配的对象的引用。

两个日志输出显示不同的值：

// this has value 10:
console.log('Table source data length: ' + hotInstance.getSourceData().length);

// this has value 0:
console.log('delayedData length: ' + _this.delayedData.length);

虽然 _this.delayedData 是我的 table 的数据源，但据我所知，它是按引用绑定的，设置为：

this.settings = {
  data: _this.delayedData
}

Answer 1

我在重新渲染 table 之前通过像这样再次更新设置找到了解决方法，但我不明白为什么需要这样做。 table.

应该始终引用 _this.delayedData

          // THIS IS THE WORKAROUND I NOW FOUND. I JUST ASSIGN THE DATA SOURCE
          // AGAIN, BUT WHY IS THAT NEEDED?
          hotInstance.updateSettings({
              data: _this.delayedData,
          });

          hotInstance.render();

在我看来像是一个错误，已在 https://github.com/handsontable/ngHandsontable/issues/180

上报告

ngHandsontable：异步加载数据源和绑定不适用于 Angular

ngHandsontable: async loading of datasource and binding not working with Angular

data-binding

angularjs

handsontable