Ожидание инициализации массива с данными из Firebase перед вызовом методов

Question

У меня есть служба Angular, которая предоставляет доступ к Firebase.У меня есть компонент, в котором я хочу получить данные из Firebase, поместить эту информацию в массив, а затем вызвать некоторые функции для этого теперь инициализированного массива.Я новичок в Angular, поэтому я не совсем уверен, как мне следует реализовать это поведение.Я знаю, что подписка () является асинхронной, и мне нужно реализовать свои функции так, чтобы они были чувствительны к этому.

graph.component.ts

import { Component, OnInit, OnChanges, ViewChild, ElementRef, Input, ViewEncapsulation } from '@angular/core';
import { EscortService } from '../services/escort/escort.service';
import { Escort } from '../data/escort.data';
import * as d3 from 'd3';

@Component({
  selector: 'app-graph',
  templateUrl: './graph.component.html',
  styleUrls: ['./graph.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class GraphComponent implements OnInit {

       escortList : Escort[] = [];

        constructor(private escortService : EscortService, private element: ElementRef){
        } 

        ngOnInit(){
            this.getData();
            this.generateBarChart();
        }

        getData(){
            var esc = this.escortService.getData();
            esc.snapshotChanges().subscribe(item => {
              this.escortList = [];
              item.forEach(element => {
                    var y = element.payload.toJSON();
                    y["$key"] = element.key;
                    var currentEscort = (y as Escort);
                    if(currentEscort.status == 'Completed'){
                        console.log("escort-list -> ngOnInit() : currentEscort.status = " + currentEscort.status);
                        this.escortList.push(currentEscort);
                     }
              });
           });
        }

Answer 1

escortList должен быть Observable.

    private const escortList = new ReplaySubject<Escort[]>();
    get escortList() : Observable<Escort[]> {
        return this.escortList.asObservable();    // this prevents caller from being able to call method 'next' on the subject
    }

    constructor(private escortService : EscortService, private element: ElementRef){
    } 

    ngOnInit(){
        this.getData();
        this.generateBarChart();
    }

    getData(){
        var esc = this.escortService.getData();
        esc.snapshotChanges().subscribe(item => {
          const newEscortList = [];
          item.forEach(element => {
                var y = element.payload.toJSON();
                y["$key"] = element.key;
                var currentEscort = (y as Escort);
                if(currentEscort.status == 'Completed'){
                    console.log("escort-list -> ngOnInit() : currentEscort.status = " + currentEscort.status);
                    newEscortList.push(currentEscort);
                 }
          });
          this.escortList.next(newEscortList);
       });
    }

А затем, в вашем компоненте, вам просто нужно подписаться на Observable, чтобы получать обновления.Не забудьте отписаться.

Answer 2

У меня тоже была эта проблема.Что вам нужно сделать, это поместить оператор *ngIf в компонент в app.component.html (или любой элемент, который находится непосредственно над вашим), проверяя, равна ли переменная is_loading значению false.Вы можете установить переменную is_loading в вашем сервисе, которая устанавливается равной true при инициализации, но ложно, как только вы собрали свои данные.
Надеюсь, это поможет!