刷新手柄角4

Question

我正在使用n2手柄与角4为一个项目。当数据发生变化时，我似乎想不出如何刷新表。我找到了这篇文章：

Refresh a handsontable

这似乎是我想要的，但我不知道如何访问这个可处理的对象。我最初的想法是使用#进行绑定，但它没有按预期工作，它只是将“未定义的”传递给函数。

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

我最初也遇到了同样的问题，无法理解如何访问render函数。在component.ts文件中使用下面一行对我来说非常有用。

hot.getHandsontableInstance().render();

我不确定的是为什么传递#热返回为您未定义。下面列出了我的代码片段。

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. 请参阅组件中的可处理组件，如下所示

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

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

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


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

那你应该都准备好了。

我想更新这个帖子的原因是，答案中的方法不再存在于组件中。尽管hotInstance属性确实存在，但devs将其标记为私有属性。

​

​