使用@ViewChildren处理高级图表

Question

关于如何在角2：https://angular2highcomponents.azurewebsites.net/LineCharts/BasicLine中使用高图(基本线图)，有一个例子

我想知道如何动态地实现这一点，而不知道我将绘制多少个图表。下面是我尝试过的(但失败了)：

在我的component.ts：

@ViewChildren('chart') components: QueryList<any>;
Highcharts.chart(this.components.toArray()[0].nativeElement, this.lineConfig); //with a legit lineConfig, of course

在我的component.html：

<div *ngFor="let widget of widgets" class="col-xs-12 col-sm-6 placeholder2">
        <div #chart style="width:100%; height:300px;"></div>
      </div>

我知道这个错误：

TypeError:无法读取未定义的属性“nativeElement”

我得到这个错误是因为组件数组不是初始化的，而是使用viewChild的，这不是一个问题(如您在示例中所看到的)。

提前谢谢。

Answer 1

你可以尝试几种方法，我会把它们都分组：

import { Component, OnInit, AfterViewInit, AfterViewChecked } from '@angular/core';

export class YourClass, implements OnInit, AfterViewInit, AfterViewChecked {
    ngOnInit() {
        Highcharts.chart(this.components.toArray()[0].nativeElement, this.lineConfig); //with a legit lineConfig, of course
    }
    ngAfterViewInit() {
        Highcharts.chart(this.components.toArray()[0].nativeElement, this.lineConfig); //with a legit lineConfig, of course
    }
    ngAfterViewChecked() {
        Highcharts.chart(this.components.toArray()[0].nativeElement, this.lineConfig); //with a legit lineConfig, of course
    }
}

尝试使用AfterViewChecked first, it should work.