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

实现OnInit解决了in this answer所述的问题。

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

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

Angular2输入和highcharts

1 个答案: