Ошибка: «Не удается создать Google Chart без данных!»когда данные загружаются в aync Angular Service

Question

Я действительно изо всех сил пытаюсь заставить это работать.Когда я получаю данные из Angular Service внутри компонента, я получаю консольную ошибку, что Google Chart не может быть загружен без данных.Когда я объявляю данные вне Service.subscribe, диаграмма работает нормально.Я думаю, что Google-диаграммы вызывают еще до того, как сервис возвращается, так как я могу заставить его ждать его?Пожалуйста, посмотрите на фрагмент кода ниже.Оцените любую помощь или указатели.

Вот библиотека, которую я использую https://github.com/FERNman/angular-google-charts

app.module.ts

import { GoogleChartsModule } from 'angular-google-charts';
...
  ],
  imports: [
...
        GoogleChartsModule
  ],
...
})
export class AppModule { }

component.html

<google-chart #chart
[title]="title"
[type]="type"
[data]="chartData"
[options]="options"
[width]="width"
[height]="height">
</google-chart>

component.ts

import { Component, OnInit } from '@angular/core';
import { MilestoneService } from 'src/app/milestone.service';
import { Milestone } from 'src/app/milestone';

@Component({
    selector: 'app-timeline',
    templateUrl: './timeline.component.html',
    styleUrls: ['./timeline.component.css']
})
export class TimelineComponent implements OnInit {

title: string
type: string
chartData: Array<Array<any>>
options: {}
width: number
height: number

constructor(
private milestoneService: MilestoneService,
) { }

ngOnInit() {

this.title = 'Some title'
this.type = 'Timeline'
this.width = 550
this.height = 400
this.options = {}

// IF I UNCOMMENT THIS, IT WORKS!
// this.chartData = [
//  ['program 1', 'milestone 1', new Date('2019-10-10'), new Date('2019-11-11')],
//  ['program 2', 'milestone 2', new Date('2019-11-14'), new Date('2019-12-10')],
// ]

this.milestoneService.getMilestonesTimeline().subscribe((data: Milestone[]) => {
// WHY IS THIS NOT WORKING?
this.chartData = data.map(d => [d.program, d.title, new Date(d.start), new Date(d.end)])
})
}
}   

Answer 1

Я согласен с ответом @ Людвига.Но добавление структурных директив * ngIf повлияет на производительность dom.Просто вы можете инициализировать chartData с пустым двумерным массивом, как показано ниже.

app-component.html

<google-chart [type]="myType" [data]="myData" ></google-chart>

app-component.ts

export class AppComponent implements OnInit {
    myData:any = [[]] ;
    myType = 'PieChart';

    ngOnInit() {

      // getting sample data from backend
     // myData will be myData = [['Wakanda',1200],['Brooklyn',10000]]


     this.http.get('http://localhost:1234/getChartData').subscribe(data => {
      this.myData = data;
    });

  }
}

Answer 2

Я думаю, что вы правы.График выполняется до того, как данные станут доступны.Добавьте * ngIf = "chartData" к тегу Google-диаграммы:

<google-chart #chart *ngIf="chartData"
 ...
</google-chart>

Это предотвращает выполнение диаграммы Google до тех пор, пока chartData равна undefined.