angular - 如何通过 firebase 异步更新 ng2-charts 中的值

Question

我是 angular2 的新手。我的问题是我通过 ng2-charts lib 创建了一个条形图并使用 angularfire2 将它链接到 firebase。我有 2 个组件和一个服务，用于向我的 firebase 数据库发送数据和从我的 firebase 数据库接收数据。我能够通过我的 data.service.ts 将来自一个组件 doctor-local.component.ts 的数据发送到 firebase 并在我的 doctor-expert 上接收它.component.ts 并使用 (ngModelChange) 事件绑定(bind)使此处的数据与 firebase 数据库中值的更改同步，并在同一组件中实时显示。条形图也在此组件中。

这是我的 expert.component.ts 和 doctor-expert.component.html

import {Component} from '@angular/core';
import {DataService} from '../data.service';
import {FirebaseObjectObservable} from 'angularfire2';

@Component({
  selector: 'app-doctor-expert',
  templateUrl: './doctor-expert.component.html',
  styleUrls: ['./doctor-expert.component.css']
})
export class DoctorExpertComponent {
  public items: FirebaseObjectObservable<any>;
  
  public barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: true
  };
  public barChartLabels: string[] = ['RBC Count', 'WBC Count', 'Haemoglobin'];
  public barChartType: string = 'bar';
  public barChartLegend: boolean = true;
  rbc: number;
  wbc: number;
  haemo: number;


  public barChartData: any[] = [
    {data: [75, 59, 80], label: 'Current Count'},
    {data: [28, 48, 40], label: 'Average Normal Count'}
  ];

  constructor(private dataService: DataService) {
    this.items = this.dataService.messages;
    this.items.subscribe(data => {
      this.rbc = parseInt((data.rbccount), 10);
      this.wbc = parseInt((data.wbccount), 10);
      this.haemo = parseInt((data.haemocount), 10);
    });
    this.barChartData = [
      {data: [this.rbc, this.wbc, this.haemo], label: 'Current Count'},
      {data: [50, 50, 50], label: 'Average Normal Count'},
    ];
  }

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

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

<ul class="list-group container">
  <li class="list-group-item">RBC Count: {{(items | async)?.rbccount}} </li>
  <li class="list-group-item">WBC Count: {{(items | async)?.wbccount}} </li>
  <li class="list-group-item">Haemoglobin Count: {{(items | async)?.haemocount}} </li>
</ul>

<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>
</div>

这是我的data.service.ts

import {Injectable} from '@angular/core';
import 'rxjs/Rx';
import {AngularFire, FirebaseObjectObservable} from 'angularfire2';

@Injectable()
export class DataService {
  public messages: FirebaseObjectObservable<any>;

  constructor( public af: AngularFire ) {
    this.messages = this.af.database.object('data');
  }


  sendData(value1, value2, value3) {
    const message = {
      rbccount: value1,
      wbccount: value2,
      haemocount: value3
    };
    this.messages.update(message);
  }

  sendrbc(value){
    const message = {
      rbccount: value
    };
    this.messages.update(message);
  }

  sendwbc(value2){
    const message = {
      wbccount: value2
    };
    this.messages.update(message);
  }

  sendhaemo(value3){
    const message = {
      haemocount: value3
    };
    this.messages.update(message);
  }
}

“this.items = this.dataService.messages”从数据库接收代码，subscribe 方法从 observable 获取值。现在我想更新 barChartData 中收到的这个值，并使其与数据库中的更改保持同步。因此，每次通过 doctor-local.component.ts 传递的数据发生变化时，数据库和条形图都会立即发生变化。我尝试在构造函数本身中这样做，但数据根本不显示在条形图中，更不用说不断更​​新了。

Answer 1

我做了一些挖掘并想出了这个非常直接的解决方案。问题是数据集是异步加载的，图表是在初始化时呈现的，这就是它无法加载到达的新数据的原因。

解决方法是等到异步完成后再绘制 Canvas 。在您的组件中:

isDataAvailable:boolean = false;
ngOnInit() {
asyncFnWithCallback(()=>{ this.isDataAvailable = true});
}

哪里asyncFnWithCallback()是你的职能。

然后在您的 html 中，将整个图表模板包裹起来:

<div *ngIf="isDataAvailable">
. . . chart canvas + any other template code . . .
</div>

在这种情况下，对于 doctor-expert.component.ts ，新代码如下所示:

import {Component, OnInit} from '@angular/core';
import {DataService} from '../data.service';
import {FirebaseObjectObservable} from 'angularfire2';

@Component({
  selector: 'app-doctor-expert',
  templateUrl: './doctor-expert.component.html',
  styleUrls: ['./doctor-expert.component.css']
})
export class DoctorExpertComponent{
  public items: FirebaseObjectObservable<any>;

  public barChartOptions: any = {
    scaleShowVerticalLines: false,
    responsive: true
  };
  public barChartLabels: string[] = ['RBC Count', 'WBC Count', 'Haemoglobin'];
  public barChartType: string = 'bar';
  public barChartLegend: boolean = true;
  rbc: number;
  wbc: number;
  haemo: number;


  public barChartData: any[] = [];

  isDataAvailable: boolean = false;

  constructor(private dataService: DataService) {
    this.items = this.dataService.messages;
    this.items.subscribe(data => {
      this.rbc = parseInt((data.rbccount), 10);
      this.wbc = parseInt((data.wbccount), 10);
      this.haemo = parseInt((data.haemocount), 10);
      this.barChartData = [
        {data: [this.rbc, this.wbc, this.haemo], label: 'Current Count'},
        {data: [50, 50, 50], label: 'Average Normal Count'},
      ];
      this.isDataAvailable = true;
    });
  }


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

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

还有 doctor-expert.component.html看起来像这样:

<ul class="list-group container">
  <li class="list-group-item" (ngModelChanges)="update($event)">RBC Count: {{(items | async)?.rbccount}} </li>
  <li class="list-group-item" (ngModelChanges)="update($event)">WBC Count: {{(items | async)?.wbccount}} </li>
  <li class="list-group-item" (ngModelChanges)="update($event)">Haemoglobin Count: {{(items | async)?.haemocount}} </li>
</ul>

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