チャートの問題は、角2

Question

に私がデータをロードした後、チャートを表示しようとしていました。そこで、条件付きのdivレンダリングを実装しました。ここでは、ngIfを使用して、データ検索が成功したときにdiv領域がロードされます。私は、このdivに載っていなかったハイチャートをいくつか持っていました。

私たちは、角2のグラフのngIfを使用することができないと言われthis postに出くわした。しかし、私はngIfを使用して回避しngShow/ng-show/ngCloakを使用する場合、チャートがロードされますが、ページ内のデータがロードされていません。

<div class=title-bar *ngIf="isLoaded"> 
    <div class=container><a class=btn-back href=temp.html>Back</a> 
    <p class=title>{{project.name}}</p> 
    <div class=col-sm-6> 
     <div id='chart-2'></div> 
    </div> 
    </div> 
</div> 

ここで、私はchart-2 = IDにチャートをロードしようとしていました。私は* ngIfを使用しない場合は、チャートがprojectオブジェクトをロードしますが、されていません。ここに機能を実装する別の方法がありますか？

Answer 1

私の周りの仕事を使用してこの問題を修正しました。将来誰でもそれを使用できるように、ここに投稿してください。

私はisLoaded=falseのときに 'invisible'（表示：なし;）というクラスを使用しています。

<div class="tabs {{isLoaded? '': 'invisible'}}"> 
    <div class=container><a class=btn-back href=temp.html>Back</a> 
    <p class=title>{{project.name}}</p> 
    <div class=col-sm-6> 
     <div id='chart-2'></div> 
    </div> 
    </div> 
</div> 

Answer 2

私はngIfブロック内Highchartsの問題を回避する方法についてはよく分からないんだけど、あなたはチャートがロードされているngIfを削除すると場合、project.name一部のための簡単な解決策があります。

角度テンプレートは、彼らが用意されていたときに必ず値が唯一の補間されますsafe navigation operatorと呼ばれる機能を、持っています。
あなたはそれがロードされる前projectからあなたを守ります<p class=title>{{project?.name}}</p>は未定義されて使用することができます。