如何通过 Firebase 实时异步更新 NG2 图表中的值

Question

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

这是我的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" 从数据库中接收代码，订阅方法从可观察量中获取值。现在我想更新在 barChartData 中收到的这个值，并使其与数据库中的更改保持同步。这样，每次通过doctor-local.component.ts的数据发生变化时，数据库和条形图都会立即发生变化。我尝试在构造函数本身中执行此操作，但数据根本不显示在条形图中，更不用说不断更新了。

Answer 1

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

解决方法是等待绘制画布，直到异步完成。在组件中：

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>