Угловой - рендеринг Google Chart не удается при обновлении страницы - PullRequest
0 голосов
/ 28 июня 2018

Я использую Google Chart для рендеринга диаграмм в своем угловом приложении. Это прекрасно работает при первом посещении страницы, но как только я обновляю страницу. Переменные, такие как googleLoaded и google, становятся неопределенными.

Я использовал код директивы от https://github.com/vimalavinisha/angular2-google-chart/

index.html

<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>  
    var googleLoaded = false;
    var googleChartsPackagesToLoad = ['geochart'];
</script>

Вот URL стекаблика: https://stackblitz.com/edit/angular-3av4p7

Ошибка на консоли: Error on console

1 Ответ

0 голосов
/ 03 июля 2018

Здесь я обновил ваш стакблиц.

Я установил, что моя локальная система Google Map протестирована и работает нормально. Поэтому iam заменил ваш angular2-google-chart.directive.ts файл на текущий установленный файл.

А также вы не правильно инициализировали скрипт в index.html файле в теге <head></head>. В этом проблема. Пожалуйста, сделайте то же самое в вашем HTML-файле.

файл index.html,

<html>
<head>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>  
    // !important: You want to give this variable(var googleLoaded = false;). This is used to run multiple chart in your jade.
    var googleLoaded = false;
    // !important: Define which chart packages to preload.Because this package uses ChartWrappers you can use any chart type that Google supports, but if it // isn't loaded it will load it on demand. 
    var googleChartsPackagesToLoad = ['geochart'];
</script>
</head>
<<body>
  <my-app>loading</my-app>
</body>
</html>

Отлично работает ваш стек после обновления iam https://stackblitz.com/edit/angular-mn7d6q

Скриншот

enter image description here

Надеюсь, это решит вашу проблему.

Спасибо

Музукумар

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...