Angular Firestore获取一条记录，并在刷新后获取所有记录

Question

我有一个Ionic-Angular Web应用程序，该程序可让医院的患者向护士发送请求，并且护士可以在请求完成后记录该请求。我有一个分析页面，当前正在显示一张带有chart.js的图表-Nurse的平均完成时间（以分钟为单位）。为此，在ngOnInit中，如果用户的类型字段为“ n'（护士）。之后，我获取所有已完成的请求。后来，在一个循环中，我为每个护士进行了平均时间的平均计算。

当我启动该应用程序并登录时，当我访问“分析”页面时，似乎只在订阅中加载一位护士（当前登录的一位护士），因此该图表在图表中仅显示该护士的条形图。在控制台中，我可以看到它最初会吸引一位护士，但后来又与所有护士再次获取-但是图表不会更新。

当我刷新页面时，将按原样设置图表。

奇怪的是，即使只获取一位护士，即使我的代码中没有优先级，也始终是当前登录的护士。

Analytics组件.ts文件：

    import { Component, OnInit, ViewChild } from '@angular/core';
import { Observable } from 'rxjs';
import {
  AngularFirestoreCollection,
  AngularFirestore
} from '@angular/fire/firestore';
import { Users } from '../users/users.model';
import { Chart } from 'chart.js';
@Component({
  selector: 'app-analytics',
  templateUrl: './analytics.page.html',
  styleUrls: ['./analytics.page.scss']
})
export class AnalyticsPage implements OnInit {
  data: Observable<any[]>;
  ref: AngularFirestoreCollection<any>;
  nurseRef: AngularFirestoreCollection<any>;
  nurses: Users[];
  @ViewChild('valueBarsCanvas') valueBarCanvas;
  valueBarsChart: any;

  chartData = null;

  constructor(private firestore: AngularFirestore) {}

  ngOnInit() {
    // get Nurses list
    this.nurseRef = this.firestore.collection('added-users', ref =>
      ref.where('type', '==', 'n')
    );
    this.nurseRef.valueChanges().subscribe(result => {
      this.nurses = result;
    });

    // get Completed Requests
    this.ref = this.firestore.collection('requests', ref =>
      ref.where('status', '==', 'Completed')
    );
    this.ref.valueChanges().subscribe(result => {
      if (this.chartData) {
        console.log('true ', result);
        this.updateCharts(result);
      } else {
        console.log('false ', result);
        this.createCharts(result);
      }
    });
  }

  getReportValues() {
    let reportByNurse = {};
    let millisecondsPerHour = 1000 * 60 * 60;
    let counter;
    let sum;
    let avg;
    for (let nurse of this.nurses) {
      counter = 0;
      sum = 0;
      for (let request of this.chartData) {
        if (request.nurseName === nurse.name) {
          counter += 1;
          sum +=
            (request.completionDate.toDate() - request.date.toDate()) /
            millisecondsPerHour;
        }
      }
      avg = sum / counter;
      reportByNurse[nurse.name] = avg;
    }
    return reportByNurse;
  }

  async createCharts(data) {
    this.chartData = data;
    console.log('chart data is: ' + this.chartData);
    let colors = [];
    let i = 0;
    let chartData = await this.getReportValues();
    console.log('new chart data is: ' + chartData);
    while (i < this.getObjectSize(chartData)) {
      colors.push(this.getRandomColor());
      i += 1;
    }
    this.valueBarsChart = new Chart(this.valueBarCanvas.nativeElement, {
      type: 'bar',
      data: {
        labels: Object.keys(chartData),
        datasets: [
          {
            data: Object.values(chartData),
            backgroundColor: colors
          }
        ]
      },
      options: {
        legend: {
          display: false
        },
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true
              }
            }
          ]
        }
      }
    });
  }

  async updateCharts(data) {
    this.chartData = data;
    let chartData = await this.getReportValues();

    this.valueBarsChart.data.datasets.forEach(dataset => {
      dataset.data = Object.values(chartData);
    });
    this.valueBarsChart.update();
  }

  getRandomColor() {
    let letters = '0123456789ABCDEF'.split('');
    let color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }

  getObjectSize(obj: {}) {
    let size = 0,
      key;
    for (key in obj) {
      if (obj.hasOwnProperty(key)) {
        size++;
      }
    }
    return size;
  }
}