Refresh Handsontable Angular 4

Question

プロジェクトでは、角度4のn2-handsontableを使用しています。私は、データが変更されたときにテーブルをリフレッシュする方法を理解できないようです。私はこの記事を見つけました：

Refresh a handsontable

私が欲しいもののようですが、私はhandsontableオブジェクトにアクセスする方法を見つけ出すことはできません。私の最初の考えはバインディングのために＃を使用することでしたが、それは意図したとおりに動作していない、それは関数に '未定義'を渡すだけです。

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

編集

component.html：私はngIfのトリックを行うことによって、レンダリングを強制することができますが、それは良い解決策のように見えるしていません。

Answer 1

私は最初は同じ問題があり、レンダリング機能にアクセスする方法を理解できませんでした。 component.tsファイル内の次の行を使用すると、私のトリックになります。

hot.getHandsontableInstance().render(); 

私がよく分からないことは、#hotがあなたのために未定義を返す理由です。私は下に私のコードスニペットを掲載しています。

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として、あなたのクラスでコンポーネントのインスタンスにアクセスすることができます。