Angular-Highcharts: невозможно прочитать свойство 'квартиры' неопределенного объекта

Question

Я использую Highcharts с Angular, и у меня есть два объекта.

У объекта один есть фиктивные данные, а у объекта два данные извлекаются из облака через xmlHttpRequest. Когда я использую объект один в Highcharts, я получаю ожидаемый результат, но с объектом два я получаю

ОШИБКА TypeError: Невозможно прочитать свойство 'Condo' из неопределенного

ОШИБКА TypeError: Невозможно прочитать свойство 'Квартира' из неопределенного

Согласно console.log, два объекта выглядят и должны быть идентичны.

Объект первый:

var secondChartData = {
   Condo: [120],
   Apartment: [302],
}
//console log: secondChartData {Condo: Array(1), Apartment: Array(1)}

Объект второй:

buildingTypeObj = {};
buildingType: any[] = [];
buildingSize: any[] = [];
constructor() {
  // other codes
  this.buildingType.push(...from Firebase...);
  this.buildingSize.push(...from Firebase...);
  for(var j = 0; j < this.buildingType.length; j++) {
    this.buildingTypeObj[this.buildingType[j]] = [this.buildingSize[j]];
  }
  //console log: secondChartData {Condo: Array(1), Apartment: Array(1)}
}

Highcharts:

ngAfterViewInit): void {
  // other codes
  function renderSecond(e) {
    var point = this;
    series: [{
      data: this.buildingTypeObj[point.name], // doesn't work
      //data: secondChartData[point.name], // works
    }]
  }
}

REST API через асинхронную настройку, потому что была настроена система:

static async getInfo() {
  // other codes
  const xmlHttp = new XMLHttpREquest();
  xmlHttp.open("GET", groupsEndpoint, false); // false for async
  // other codes
}

Я не понимаю, почему объект два возвращает ошибку.

Может ли ошибка быть вызвана асинхронностью?

Вот моя скрипка, чтобы показать предполагаемое поведение

Answer 1

Поскольку вы использовали синтаксис функции ES5 , контекст this изменяется.

Вы больше не можете получить доступ к buildingTypeObj внутри вашего компонента с помощью this .

Вместо этого имейте над своей функцией ссылку this .

ngAfterViewInit() {
  // other codes
  const self = this;
  function renderSecond(e) {
    series: [{
      data: self.buildingTypeObj[this.name],
      data: secondChartData[this.name], 
    }]
  }
}