【问题标题】：Refresh Handsontable Angular 4刷新 Handsontable Angular 4
【发布时间】：2018-02-10 23:25:31
【问题描述】：

我在一个项目中使用角度为 4 的 n2-handsontable。当数据发生变化时，我似乎无法弄清楚如何刷新表格。我找到了这篇文章：

这似乎是我想要的，但我不知道如何访问可动手操作的对象。我最初的想法是使用 # 进行绑定，但它没有按预期工作，它只是将 'undefined' 传递给函数。

component.html

 <button class="btn btn-default" (click)="add(hot)">Add</button>
 <hotTable [data]="_dataHot"
                  [colHeaders]="_columnHeadersHot"
                  [columns]="_columnsHot"
                  [options]="{contextMenu: true}"
                  #hot>
</hotTable>

组件.ts

add(hot){
    //do stuff
    hot.render();
}

编辑：我可以通过使用 ngIf 技巧来强制渲染，但这似乎不是一个好的解决方案。

【问题讨论】：

标签： angular handsontable

【解决方案1】：

我最初遇到了同样的问题，但无法弄清楚如何访问渲染功能。在 component.ts 文件中使用以下行对我有用。

hot.getHandsontableInstance().render();

我不确定为什么传递 #hot 会为您返回 undefined。我在下面列出了我的代码 sn-ps。

component.html

<hotTable 
    [data]="data" 
    (afterChange)="afterChange($event, hot)" 
    [colHeaders]="colHeaders" 
    [columns]="columns" 
    [options]="options"
    [colWidths]="colWidths"
    #hot>
</hotTable>

component.ts

private afterChange(e: any, hot) {
    // some commands
    hot.getHandsontableInstance().render();
}

【讨论】：

我很笨，我没有意识到我需要使用#hot，并在使用@viewchild() 时将对象传递给函数。谢谢！
this.hot.getHandsontableInstance is not a function。有没有人解决这个问题？
this.hot.hotInstance
对我来说 afterchange 事件没有触发

【解决方案2】：

您需要使用 ViewChild 装饰器在代码中获取对 hot 的引用。您可以将其存储在同名变量中。

@ViewChild('hot') hot

现在您可以以this.hot 的身份访问您的类中组件的实例。

【讨论】：

感谢您的帮助，ViewChild 是朝着这个方向迈出的一步。 render() 似乎不是可动手操作组件的有效功能。有一个getHandsontableInstance()，它返回一个handsontable 类，它具有render()，但getHandsontableInstance() 在尝试使用它时返回未定义。

【解决方案3】：

更新：2020 年 6 月 24 日

对于那些仍在苦苦挣扎或想要我认为更正确答案的人，我为大家创建了一个沙盒：https://codesandbox.io/s/patient-glade-6e0o3?file=/src/app/app.component.ts

步骤：

像这样将#hot（或其他标识符）添加到您的可操作组件中

<hot-table #hot [settings]="settings" [width]="552" [height]="600" licenseKey="non-commercial-and-evaluation"></hot-table>

像这样引用组件内的可动手操作的组件

@ViewChild("hot", { static: false }) hot: HotTableComponent;

使用 handsontable 组件提供的 updateHotTable 方法使用新数据更新您的表格，如下所示

// inside your component
settings: Handsontable.GridSettings = {
 data: [/* some data */]
}


updateTable(){
 // do something to update settings
  this.hot.updateHotTable(this.settings);
}

那么你应该准备好了。

之所以要更新这篇文章，是因为组件上不再存在答案中的方法。尽管hotInstance 属性确实存在，但它被开发人员标记为私有。

【讨论】：

【解决方案4】：

使用热表时应该调用ngOnDestroy方法

 ngOnDestroy() {
    this.hot.getHandsontableInstance().destroy();
}

然后在 onChanges 中就可以传递更新的数据了

ngOnChanges() {
    this.tableDataChange.next(this.tableData);
}

[1]：https://i.stack.imgur.com/3n8MH.png - ngOnChanges

[2]：https://i.stack.imgur.com/GwRPC.png - ngOnDestroy

【讨论】：