角度动态高图集成 - 图表组件中的响应未更新

我已经集成了一个简单的高图与角度 . 数据来自本地创建的下面的模拟json .

{
"title": "Mothly Average RainFall",
"subtitle": "Source: WorldClimate.com"
}

下面是我的图表组件

import { Component, OnInit, AfterContentInit, OnDestroy, ViewChild, 
ElementRef } from '@angular/core';
import { chart } from 'highcharts';
import { ChartServiceService } from '../chart-service.service';


@Component({
selector: 'app-barchart',
 templateUrl: './barchart.component.html',
 styleUrls: ['./barchart.component.css'],
 providers: [ChartServiceService]
})
export class BarchartComponent implements OnInit, AfterContentInit, 
 OnDestroy {
 resData: any;
 @ViewChild('barChartId') barChartId: ElementRef;
chart: Highcharts.ChartObject;

 constructor(private chartService: ChartServiceService) { }

getJsonData() {
this.chartService.getData()
.then(response => {
  this.resData = response;
  console.log(this.resData.title);
})
.catch(err => err)
 }

ngOnInit() {
this.getJsonData();
 }

ngAfterContentInit() {
const barChart: Highcharts.Options = {
  chart: {
    type: 'column'
    },
  title: {
    text: this.resData.title
    },
  subtitle: {
    text: this.resData.subtitle
    },
  xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 
 'Sep', 'Oct', 'Nov', 'Dec'],
    crosshair: true
    },
  yAxis: {
    min: 0,
    title: {
      text: 'Rainfall (mm)'
     }
    },
  plotOptions: {
    column: {
      pointPadding: 0.2,
      borderWidth: 0
     }
    },
  series: [{
    name: 'Tokyo',
    data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 
  194.1, 95.6, 54.4]

  }, {
    name: 'New York',
    data: [83.6, 78.8, 98.5, 93.4, 106.0, 84.5, 105.0, 104.3, 91.2, 83.5, 
 106.6, 92.3]

  }, {
    name: 'London',
    data: [48.9, 38.8, 39.3, 41.4, 47.0, 48.3, 59.0, 59.6, 52.4, 65.2, 59.3, 
51.2]

  }, {
    name: 'Berlin',
    data: [42.4, 33.2, 34.5, 39.7, 52.6, 75.5, 57.4, 60.4, 47.6, 39.1, 46.8, 
51.1]

  }]
};

this.chart = chart(this.barChartId.nativeElement, barChart);
  }

 ngOnDestroy() {
   this.chart = null;
 }

}

我在resData中获取响应json数据，并且在访问图表组件中的 Headers 时，我收到错误，说无法读取未定义的属性 . 任何人都知道这个问题我在console.log中也是这样 .

我在下面更新了图表服务代码

import { Injectable } from '@angular/core';
import { Http, Response} from '@angular/http';

@Injectable({
  providedIn: 'root'
})
export class ChartServiceService {

constructor(private http: Http) { }

// function to get the api response and convert to json
   private getResponseData(res: Response) {
   return res.json();
  }

  //function to handle the error from api call
  private handleError(error: Response | any) {
 console.error(error.message || error);
return Promise.reject(error.message || error);
 }

//function to get the response data using promise
public getData(): Promise<any> {
return this.http.get('assets/mockData.json').toPromise()
  .then(this.getResponseData)
  .catch(this.handleError);
 }
}