Как построить данные, поступающие асинхронно в диаграмме chartjs

Question

У меня есть база данных firebase, я читаю данные с помощью angularfire2, анализирую их в массиве и передаю их обратно пользователю, где они должны быть нанесены на график chartjs

Пока у меня естьслужба, которая возвращает обещание, если разрешена, она возвращает массив.Я пробовал разные способы установки данных.

сервисная функция

getChart()
  {
    let promise = new Promise((resolve, reject) => {

      let dates: string[] = [];
      let values: number[] = [];
      let response: any = [];

      let res: Observable<BodyFat[]> = this.db.list(this.BASE_PATH, ref => ref.orderByChild(this.DATE).limitToLast(40)).snapshotChanges()
    .pipe(map(items => {
      return items.map(item => {
        let bodyfat = new BodyFat;
        bodyfat.id = item.payload.key;
        bodyfat.date = new Date(item.payload.child(this.DATE).val());
        bodyfat.fat = item.payload.child(this.FAT).val();

        return bodyfat;
      })
    }));

    let i: number = 0;

    res.subscribe(data => {
      data.forEach(element => {

        i++;

        var shortDate = moment(element.date).format('DD.MM.YYYY');

        if(dates.indexOf(shortDate) === -1)
        {
          dates.push(shortDate);
          values.push(element.fat);
        }

        if(i === data.length-1)
        {
          response = {...}

        resolve(response);
        }
      });
    });
    });

    return promise;
  }

вызов метода выглядит как

var bodyFatChartInstance = new Chart(this.bodyfatRef.nativeElement);

this.bodyfatService.getChart().then(function(data) {
  console.log(data);
  document.getElementById('bodyFatChart').innerHTML = data.toString();
});

this.bodyFat = bodyFatChartInstance;

Если синхронно возвращается массив,Диаграмма построена очень хорошо, возвращенный массив выглядит просто отлично, но каким-то образом построение диаграммы не работает нормально.

До сих пор консоль показала мне разные ошибки, в зависимости от того, как я пытался установить данные.В настоящее время я получаю следующий

core.js:1673 ERROR Error: Uncaught (in promise): TypeError: Cannot set property 'innerHTML' of null
TypeError: Cannot set property 'innerHTML' of null

Answer 1

После долгих экспериментов и чтения я понял, как, я не знаю, является ли это лучшим или правильным способом, но он работает.

Служба в порядке, вызов должен выглядеть как

    var bodyFatChartInstance = new Chart(this.bodyfatRef.nativeElement, this.bodyfatService.getChartConfig());

    this.bodyfatService.getChart().then(function(data)
    {
      console.log(data);
      data["data"]["datasets"][0]["data"].forEach(element => {
        console.log(element);
        bodyFatChartInstance.data.datasets[0].data.push(element);
      });

      data["data"]["labels"].forEach(element => {
       bodyFatChartInstance.data.labels.push(element); 
      });

      bodyFatChartInstance.update();
    });