* ngIf在角度2中的图表问题

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

我碰到this post它说，我们不能在角2.使用ngIf的图表但是，当我避免使用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对象。有没有另外一种替代方案来实现这里的功能？

来源

2017-02-08 Philip John

为什么'project'不加载？它会抛出一个错误，像项目在那个时候是不确定的？ – yarons

我已经使用工作解决了此问题。在这里发布，以便任何人都可以在将来使用它。

我使用的类'不可见'（display：none;）当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>

来源

2017-02-21 16:24:13

我不知道，以避免内部ngIf块与Highcharts问题的方式，但如果当你删除ngIf图表加载，还有一个供project.name部分的简单解决方案。

角模板有一个名为safe navigation operator的功能，它确保值只在可用时才被插值。
您可以使用<p class=title>{{project?.name}}</p>，它在加载之前可以保护您未被定义的project。

来源

2017-02-08 14:21:15 yarons

它的工作原理。虽然不是最好的解决方案，因为我想隐藏div本身直到数据加载。（有更多的div像上面和2秒，他们都是空的现在）:-)任何想法呢？ –

* ngIf在角度2中的图表问题

回答

相关问题