刷新 Handsontable Angular 4

Question

我在一个项目中使用 n2-handsontable 和 angular 4。我似乎不知道如何在数据更改时刷新 table。我发现这个 post:

Refresh a handsontable

这似乎是我想要的，但我不知道如何访问 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>

component.ts

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

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

Answer 1

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

@ViewChild('hot') hot

现在您可以在您的 class 中以 this.hot.

访问组件实例

Answer 2

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

hot.getHandsontableInstance().render();

我不确定为什么要为您传递#hot returns 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 3

更新：2020 年 6 月 24 日

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

步骤：

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

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

像这样在组件中引用 handsontable 组件

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

使用 handsontable 组件提供的 updateHotTable 方法用新数据更新您的 table 就像这样

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


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

那么你应该已经准备好了。

之所以要更新这个post是因为答案中的方法在组件上已经不存在了。尽管 hotInstance 属性确实存在，但它被开发者标记为私有。

Answer 4

当使用 hot-table 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

刷新 Handsontable Angular 4

Refresh Handsontable Angular 4

handsontable

angular

更新：2020 年 6 月 24 日