Angular2输入和highcharts

Question

我正在使用angular2-highcharts创建一个饼图，并使用输入将数据传递给该图表。但是组件构造函数上的输入是undefined，并且不显示图表。我已经在使用*ngIf了，实际上，如果我将输入设置为undefined，那么div就会隐藏，并在我传递一些数据时显示出来。然而，图表仍然没有显示出来。

@Component({
    selector: 'pie-chart',
    directives: [CHART_DIRECTIVES],
    template: `
        <chart [options]="options"></chart>
    `
})
export class PieChartComponent {
    options: HighchartsOptions;
    @Input() pieChartData : Array<{name: string, y: number}>

    constructor () {        
        this.setChartOptions();        
    }    

    setChartOptions() {
        console.log("creating pie "+ this.pieChartData) <- undefined

        this.options = {
            ...,
            series: [{
                data: this.pieChartData
            }]
        };
    }
}

用法：

<div *ngIf="pieChartData" >
      <pie-chart [pieChartData]="pieChartData"></pie-chart>
</div>

提前谢谢你。

Answer 1

按照in this answer的说法，实现OnInit解决了我的问题。

export class PieChartComponent implements OnInit {
    options: HighchartsOptions;
    @Input() pieChartData : Array<{name: string, y: number}>

    ngOnInit () {        
        this.setChartOptions();        
    }    
...
}