Проблемы с диаграммой с * ngIf в угловом 2

Question

Я пытался отобразить диаграмму после загрузки данных. Поэтому я выполнил условный вывод div, используя * ngIf, где область div будет загружена при успешном извлечении данных. У меня была пара высоких диаграмм в этом div, которые тогда не загружались.

я наткнулся this post, который говорит, что мы не можем использовать 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> 

Здесь я пытался загрузить таблицу в ид = chart-2. Когда я не использую * ngIf, график загружается, но не project объект. Есть ли другая альтернатива для реализации функций здесь?

Answer 1

Я исправил эту проблему, используя работу. Проводя его здесь, чтобы каждый мог использовать его в будущем.

Я использую класс 'invisible' (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> 

Answer 2

Я не уверен, о том, как избежать проблем с Highcharts внутри ngIf блока, но если при удалении ngIf диаграммы загружаемых, есть простое решение для project.name части.

Угловые шаблоны имеют функцию под названием safe navigation operator, которая гарантирует, что значения только интерполируются, когда они доступны.
Вы можете использовать <p class=title>{{project?.name}}</p>, который защищает вас от project, который не определен до его загрузки.