如何将数据从Firebase动态推送到角度的条形图中

Question

HTML文件：

<div>
<div class = "container" >
  <div style="display: block" >
    <canvas baseChart 
    [datasets]="barChartData"
            [labels]="barChartLabels"
            [options]="barChartOptions"
            [legend]="barChartLegend"
            [chartType]="barChartType"
            (chartHover)="chartHovered($event)"
              (chartClick)="chartClicked($event)">

    </canvas>
  </div> 

我想显示图表上的数据有多少种类型的呼叫（传入，未接，传出）的计数，问题是它没有推送到barChartData []数组中。数据存储在Firestore中，我能够检索它，并且它也显示在控制台中。如果我传递静态数据，它将变得非常完美，而动态数据却没有。在此，它们返回进行的呼叫类型的数量。如果有人对此有任何想法，请提供帮助。谢谢

import { Component, OnInit} from '@angular/core';
import { ChartOptions, ChartType, ChartDataSets } from 'chart.js';
import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from 'angularfire2/firestore';
import { Observable } from 'rxjs/observable';

export interface Post {
  callType: string;
  ...
}
@Component({
  selector: 'app-screen2',
  templateUrl: './screen2.component.html',
  styleUrls: ['./screen2.component.scss'],
})

export class Screen2Component implements OnInit {
postsCol: AngularFirestoreCollection<Post>;
posts: Observable<Post[]>;

 public barChartOptions: any = {
   scaleShowVerticalLines: false,
    responsive: true,
  };

  public barChartLabels  = [ "incoming" , "missed" , "outgoing"];
  public barChartType  = 'bar';
  public barChartLegend = true;
  inco: any ;
  miss: any ;
  outg: any ;
    ab: any;
    bc: any;

  public barChartData: any[] = [
  {data: [], label: 'calls'}
];
isDataAvailable: boolean = false;

public chartClicked(e: any): void {
  console.log(e);
}

public chartHovered(e: any): void {
  console.log(e);
}
constructor(private db: AngularFirestore) {}
  ngOnInit() {

    let i;
    this.postsCol = this.db.collection<Post>('ana', ref => ref.orderBy('callType'));
    this.postsCol.valueChanges().subscribe(daa => {

for(i=0; i <= daa.length; i++) {
           this.ab = (daa[i].callType);
           if(this.ab == 'INCOMING'){
             this.inco = this.ab;
             console.log(this.inco)
          }
           if(this.ab == 'OUTGOING'){
             this.outg = this.ab
             console.log(this.outg)
           }
           if(this.ab == 'MISSED'){
            this.miss = this.ab
            console.log(this.miss)
       }

this.barChartData = [
            { data: [this.inco, this.miss, this.outg], label: 'calls'}
          ]
}
}

Answer 1