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

Question

当我通过输入触发来自方法的事件时，它不会正确地将数据呈现到图表中，这是我的 pb 的一个示例：

我的图表一直在工作，直到我把它放在孩子身上。看起来数据没有从孩子那里传来。

父.html：

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

父.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();
 }
  }
}