使用 @ViewChildren 处理 Highcharts

Question

在Angular 2中有一个如何使用Highcharts（基本折线图）的例子：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.