Как использовать async / await для firestore в сочетании с chart.js? - PullRequest
Новая
       9

Как использовать async / await для firestore в сочетании с chart.js?

0 голосов
/ 06 января 2019

Я хотел бы заполнить линейную диаграмму, которую я реализовал, с помощью фреймворка chart.js , используя данные из документов в firestore. Но конструкция async / await, используемая для помещения данных в массив чисел, запрещает заполнение свойства chart-data.

Я получил ответ на вопрос здесь об использовании async / await для получения данных из firestore и сохранения их в переменной, но не нашел ресурсов, касающихся комбинации с каркасом chart.js .

это мой код для установки свойств диаграммы и установки массива данных диаграммы в асинхронном ngOnInit-методе 

public barChartOptions = {scaleShowVerticalLines: false, responsive: true};
public barChartLabels = ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'];
public barChartType = 'line';
public barChartLegend = true;
public barChartData = [{data: [], label: 'Schmerzen'}];

constructor(public firebaseService: FirebaseService) {
}

async ngOnInit() {
  var numAr: number[];
  console.log('inside myData onInit ' + numAr)
  this.barChartData[0].data = await this.firebaseService.getUserState();
  //this.barChartData[0].data = [1,0,10,7]
}

getUserState() является асинхронным методом в firebaseService (Angular-Component) и возвращает number[], который я уже подтвердил, так что это не проблема неравных типов данных

console.log работает, и я вижу два числа (на данный момент numAr содержит только два числа) в консоли, но шаг после этого - назначение - не работает. Если я использую жестко закодированную версию без комментариев, диаграмма правильно показывает кривую.

...