@ViewChildren

Question

を使用してHighchartsでの作業角度2にHighcharts（基本折れ線グラフ）を使用する方法についての例があります：https://angular2highcomponents.azurewebsites.net/LineCharts/BasicLine

私が描画されますどのように多くのチャートを知らなくても、動的にこれを実装する方法を知りたいです。ここで私が試し（失敗した）ものだ：

私component.tsで

：

私component.htmlで

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

：

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

私はこのエラーを取得する：

TypeError: Cannot read property 'nativeElement' of undefined

コンポーネント配列が初期化されていないのに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.