我在加载数据后试图显示图表。 所以我使用* 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>更多推荐
ngIf,div,电脑培训,计算机培训,IT培训"/> <meta name="description" co
发布评论