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

Question

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

这是表格，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

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

我确实看到了“渲染！”在控制台中输出，因此确实会调用此代码，但是，项目不会显示在表格中。

我创建的一个类似示例，但没有 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);

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

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

// 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 是我的表的数据源，并且据我了解，它受引用绑定，设置方式为：

this.settings = {
  data: _this.delayedData
}

Answer 1

我找到了一种解决方法，方法是在重新渲染表格之前再次像这样更新设置，但我不明白为什么需要这样做。 桌子旁应始终有对_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