Как проанализировать данные (Observable), возвращаемые valueChanges () в Firebase, и вывести их на Chart.js

Question

Я пытаюсь получить некоторые данные из базы данных Firebase RealTime, я могу отобразить полученные данные, но не знаю, как преобразовать эти данные, полученные в качестве наблюдаемых, в списокчто я мог бы построить на Chart.js или любом другом каркасе диаграммы.

<code>Here is my datastored.ts module 

<pre>
    import { Component } from '@angular/core';
    import { IonicPage, NavParams, DateTime } from 'ionic-angular';
    import { NavController, Item } from 'ionic-angular';
    import { Observable } from 'rxjs-compat';
    import { AngularFireDatabase } from '@angular/fire/database';

    @IonicPage({
      name: 'DatastoredPage'
    })
    @Component({
      selector: 'page-datastored',
      templateUrl: 'datastored.html',
    })

    export class DatastoredPage {
      myDateStart:string = "2018-10-04"
      myDateEnd:string = "2018-10-30"
      incubator30: Observable<any[]>;  

      constructor(public navCtrl: NavController, public navParams: NavParams, private db:AngularFireDatabase) {

        this.incubator30 = db.list('NeoSilence/Incubator1', ref => ref.orderByChild("d").startAt(this.myDateStart).endAt(this.myDateEnd)).valueChanges();    
      }

      ionViewDidLoad() {
        console.log('ionViewDidLoad DatastoredPage');
        console.log(this.incubator30);
      }  
      getstartByDate() {
        console.log(this.myDateStart);
        console.log("Before the Startdate filter");
        this.incubator30 = this.db.list('NeoSilence/Incubator1', ref => ref.orderByChild("d").startAt(this.myDateStart).endAt(this.myDateEnd)).valueChanges();
        console.log("After the Startdate filter");
        this.incubator30.forEach(element => {
          element.forEach(co => {
            console.log(co.d)        
          })
        });
      }

      getendByDate() {
        console.log(this.myDateEnd);
        console.log("Before the Enddate filter");
        this.incubator30 = this.db.list('NeoSilence/Incubator1', ref => ref.orderByChild("d").startAt(this.myDateStart).endAt(this.myDateEnd)).valueChanges();
        console.log("After the Enddate filter");
        this.incubator30.forEach(element => {
          element.forEach(co => {
            console.log(co.d)
          })
        });
      }  
    }
    

А вот мой HTML-код, где я могу отобразить полученные данные.

    class="bgstyle" *ngFor="let StoredData of incubator30 | async">
    {{StoredData.d | json}} - {{StoredData.t | json}} {{StoredData.f | json}}dBA

Как в модуле datastored.ts IЯ смогу прочитать информацию, которую я хочу (дату (d) и измерение (f), в переменную, которую я могу построить на chart.js или старшей диаграмме, или на любой другой платформе диаграммы.

Answer 1

Я смог решить ее, подписавшись на переменную, которую я хотел бы построить.Который как «д» и «F».

this.incubator30.subscribe((res) => {
        this.date = res.map((value) => { return value.d });
        this.list = res.map((value) => { return value.f      

      })

Спасибо.