@Input数据绑定不使用Highcharts api呈现给孩子

时间:2017-07-21 14:44:10

标签: html angular data-binding angular2-highcharts

当我通过输入触发来自方法的事件时,它不能正确地将数据呈现给图表,这是我的pb的例子: 我的图表一直工作,直到我把它放在孩子身上..看起来数据不会通过孩子来...我尽量让它变得简单所以如果你有问题随便问...谢谢我提前< / p>

parent.html:

 <div class="parent" >
  <img src="black.png" type="button" (click)="displayChild()"/>
  <my-child [displayDetail]="displayMe"></my-child>
 </div> 

parent.ts:

  displayChild() {
     this.displayMe = !this.displayMe;

child.html:

<div class="chart-pie">
     <chart [options]="options" (load)="saveInstance($event.context)"
     </chart>
</div>

child.ts:

        @Input() displayDetail: boolean;
 options: any;
 data: Object[];
 chart: any;

dataSubscription: Subscription;

 constructor(private userService3: UserService3) {

       this.options = {
        chart: {  type: 'pie',
        series: [{
          name: 'Dispo',
          data: []
          }]
       };

   saveInstance(chartInstance) {
   this.chart = chartInstance;
   console.log(chartInstance);
 }

    public ngOnInit () {
    this.dataSubscription = 
this.userService3.getData().subscribe((data) => {
  this.options.series[0].data = data.data.operating_rate;
   // Code for the pie

    let percentUp = data.data.operating_rate; // 88.14
    let percentDown = 100 - percentUp; // 11.86
    this.options.series[0].data = [
    {
    name: 'Up',
    y: percentUp,
    color: '#648e59'
    },
    {
    name: 'Down',
    y: percentDown,
    color: 'white'
    }
    ];
  console.log(data);
   });
}
   public ngOnDestroy() {
   if (this.dataSubscription) {
 this.dataSubscription.unsubscribe();
 }
  }
}

0 个答案:

没有答案