刷新Handsontable Angular 4

Question

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

Refresh a handsontable

这似乎是我想要的，但我无法弄清楚如何访问handontable对象。我最初的想法是使用＃进行绑定，但它并没有按预期工作，只是通过＆＃39; undefined＆＃39;这个功能。

component.html

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

component.ts

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

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

Answer 1

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

hot.getHandsontableInstance().render();

我不确定的是为什么传递#hot会为你返回undefined。我在下面列出我的代码片段。

<强> 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();
}

Answer 2

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

@ViewChild('hot') hot

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

Answer 3

更新：6/24/2020

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

步骤：

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

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

1. 像这样引用组件内部的handsontable组件

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

1. 通过像这样的handontable组件提供的updateHotTable方法用新数据更新表

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


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

那你应该准备好了。

之所以要更新此帖子，是因为答案中的方法不再存在于组件上。即使hotInstance属性确实存在，也被开发人员标记为私有。

Answer 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