以角度2表示* ngIf的图表问题(Chart issues with *ngIf in angular 2)

以角度2表示* ngIf的图表问题(Chart issues with *ngIf in angular 2)

我在加载数据后试图显示图表。 所以我使用* ngIf实现了条件div渲染，其中div区域将在成功的数据检索时加载。 我在这个div中有几个高图，然后没有加载。

我发现这篇帖子说我们不能将ngIf用于角度为2的图表。但是当我避免使用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>

在这里，我试图将图表加载到id = chart-2 。 当我不使用* ngIf时，会加载图表，但不会加载project对象。 还有另一种方法可以在这里实现这个功能吗？

I was trying to display a chart after loading the data. So I implemented a conditional div rendering using *ngIf where the div area will be loaded on successful data retrieval. I had a couple of highcharts in this div which were not loading then.

I came across this post which says that we cannot use ngIf for charts in angular 2. But when I avoid using ngIf and use ngShow/ng-show/ngCloak, the charts are loading, but the data in the page are not loaded.

<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>

Here, I was trying to load the chart into id=chart-2. When I don't use *ngIf, the chart is loaded, but not project object. Is there another alternative to implement the functionality here?

最满意答案

我不确定如何在ngIf块中避免使用Highcharts的问题，但是当你删除ngIf图表正在加载时，对于project.name部分有一个简单的解决方案。

角度模板具有称为安全导航操作符的功能，可确保仅在值可用时进行插值。 您可以使用<p class=title>{{project?.name}}</p>来保护您在project加载之前不被定义。

I had fixed this issue using a work around. Posting it here so that anyone can use it in the future.

I am using the class 'invisible' (display:none;) when isLoaded=false.

<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>