解析角度异步函数中的数据时的空白图表

Question

我想解析从http调用获取的数据并将其解析为位于ngoninit的图表数据时遇到问题。重新加载页面时，图表显示空白数据。你能帮我解决这个问题吗？我正在使用Chartist.js和Angular4。谢谢

html：

<div class="col-md-4">
                <lbd-chart 
                  [title]="'Email Statistics'"
                  [subtitle]="'Last Campaign Performance'"
                  [chartClass]="'ct-perfect-fourth'"
                  [chartType]="emailChartType"
                  [chartData]="emailChartData"
                  [legendItems]="emailChartLegendItems"
                  [withHr]="true"
                  [footerIconClass]="'fa fa-clock-o'"
                  [footerText]="'Campaign sent 2 days ago'">
                </lbd-chart>
            </div>

ngOnInit：

 async ngOnInit() {
    console.log('Halo from ngOnInit');
    const data = await this.serviceDashboard.getAllGeografika().toPromise();
    console.log('hei' + data.length);

    this.data2 = data.length;

    this.emailChartType = ChartType.Pie;
    this.emailChartData = {

      series: [this.data2, this.data2, this.data2]
    };

    this.emailChartLegendItems = [
      { title: 'Open', imageClass: 'fa fa-circle text-info' },
      { title: 'Bounce', imageClass: 'fa fa-circle text-danger' },
      { title: 'Unsubscribe', imageClass: 'fa fa-circle text-warning' }
    ];
}

Answer 1

您已将ngOnInit声明为异步，它将自动返回Promise幕后。在Angular启动过程中调用ngOnInit的代码不知道这一点，因此它永远不会等待诺言完成，因此您的数据永远不会存储到this.emailChartData中。