Question

我有一个可以异步加载数据的方法，在我的例子中，我模拟了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 Bin： http://jsbin.com/daniyov/edit?html,js,console,output

因此，在控制器中定义了表后，数据的加载有点延迟。根据handontable文档，只要数据发生变化，就应该调用表的render（）方法，就像在example of the documentation中一样。

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

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

报告的错误

ngHandsontable：数据源的异步加载和不与Angular一起使用的绑定

1 个答案: