Angular 在调用方法之前，等待使用Firebase中的数据初始化数组

我有一个角度服务，可以访问Firebase。我有一个组件，我想从Firebase中获取数据，将该信息放入一个数组中，然后在现在初始化的数组上调用一些函数。我不熟悉Angular，所以我不确定应该如何实现这种行为。我知道subscribe（）是异步的，我需要实现我的函数，使它们对此敏感

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);
                     }
              });
           });
        }

---

我也有这个问题。您需要做的是在app.component.html中的组件上放置一个

*ngIf

语句（或直接位于您上方的任何元素），检查变量

是否正在加载

是否等于false。您可以在服务中设置

is\u loading

变量，该变量在初始化时设置为true，但在收集数据后设置为false。

---

我希望这有帮助

    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);
       });
    }

private const costlist=new ReplaySubject（）；
获取列表（）：可观察{
返回this.carvestList.asObservable（）；//这会阻止调用者调用主题上的方法“next”
}
构造器（专用护送服务：护送服务，专用元素：ElementRef）{
} 
恩戈尼尼特（）{
这是getData（）；
这个.generateBarChart（）；
}
getData（）{
var esc=this.combardService.getData（）；
esc.snapshotChanges（）.subscribe（项目=>{
const newcarvestlist=[]；
item.forEach（元素=>{
var y=element.payload.toJSON（）；
y[“$key”]=element.key；
var currentEscort=（y作为护送）；
如果（currentEscort.status==“已完成”）{
console.log（“护送列表->ngOnInit（）：currentEscort.status=“+currentEscort.status”）；
新护送列表。推送（当前护送）；
}
});
这个.coardlist.next（newcoardlist）；
});
}

---

然后，在您的组件中，您只需订阅Observable即可获得更新。别忘了取消订阅。

编译器告诉我没有.asobservable（）函数。它是asobservable（），谢谢。我以前从未使用过这些ReplaySubject对象。我可以重复它们吗？你真的应该，角度是基于可观测的，主体，。。。如果你想理解它，你必须理解它。看看这个：