Angular 组件数据在页面上显示需要18秒

我有一个angular 2应用程序，我有一个由HTML表组成的简单页面，在HTML页面的组件中，我调用了一个连接到Firebase 3并从给定表中检索值的服务，该表如下所示：

我的bug.componenet.ts如下所示：

从'@angular/core'导入{Component，OnInit}；
从“../service/bug.service”导入{BugService}；
从“../model/Bug”导入{Bug}；
@组成部分({
选择器：“错误列表”，
templateUrl:'./bug list.component.html'，
样式URL:['./bug list.component.css']
})
导出类BugListComponent实现OnInit{
私有Bug:Bug[]=[]；
构造函数（私有bugService:bugService）{}
恩戈尼尼特（）{
这个.getAddedBugs（）；
}
getAddedBugs（）{
this.bugService.getAddedBugs（）.subscribe（bug=>{
这个.bug.push（bug）；
},
错误=>{
错误（“无法获取添加的错误-”，错误）；
});
}
}

BugService：

从'@angular/core'导入{Injectable}；
//可观测
从'rxjs/Observable'导入{Observable}
//服务
从“../../core/service/firebase config.service”导入{FirebaseConfigService}；
//模型
从“../model/Bug”导入{Bug}；
@可注射（）
导出类错误服务{
//是我的firebase数据库连接。
private-bugsDbRef=this.fire.database.ref（'/bugs'）；
构造函数（私有火灾：FirebaseConfigService）{
log（this.bugsDbRef）；
}
getAddedBugs（）：可观察

我遇到的问题是，当我加载页面时，我必须等待至少18秒，firebase的bug才会出于某种原因显示在表中……但是在服务内部，当我
console.log（newBug）；
时，它们会立即出现

有人能解释是什么导致了这个问题吗

谢谢

**更新**

这是我的firebase配置文件，从bug.service.ts中引用

从'@angular/core'导入{Injectable}；
从“firebase”导入*作为firebase；
需要（'firebase/数据库'）；
//常数
从“../constant/constants”导入{FIREBASE_CONFIG}；
@可注射（）
导出类FirebaseConfigService{
私有数据库：firebase.database.database；
构造函数（）{
此.configureApp（）；
这是.configureDatabase（）；
}
公共获取数据库（）{
返回此。_数据库；
}
configureApp（）{
firebase.initializeApp（firebase_CONFIG）；
}
配置数据库（）{
这是._database=firebase.database（）；
}
} 

我将上述内容注入bug.service构造函数。
这似乎是没有运行更改检测

我猜您正在Angular外部初始化Firebase库，这使得代码在Angulars区域之外运行，这导致Angular无法识别异步调用的完成，这导致Angular无法运行更改检测，因此不会更新DOM

要么确保Firebase在Angular内部初始化，要么明确调用更改检测

constructor（私有bugService:bugService，私有cdRef:ChangeDetectorRef）{}
getAddedBugs（）{
this.bugService.getAddedBugs（）.subscribe（bug=>{
这个.bug.push（bug）；
this.cdRef.detectChanges（）；
},
这似乎是未运行更改检测

我猜您正在Angular外部初始化Firebase库，这使得代码在Angulars区域之外运行，这导致Angular无法识别异步调用的完成，这导致Angular无法运行更改检测，因此不会更新DOM

要么确保Firebase在Angular内部初始化，要么明确调用更改检测

constructor（私有bugService:bugService，私有cdRef:ChangeDetectorRef）{}
getAddedBugs（）{
this.bugService.getAddedBugs（）.subscribe（bug=>{
这个.bug.push（bug）；
this.cdRef.detectChanges（）；
},
嘿，他们似乎使用了ChangeDetectorRef，当你说确保firebase在Angular内初始化时，我该怎么做？因为我觉得它在Angular 2内运行？抱歉，我不知道。我自己没有使用过firebase。但通常Angular内初始化的代码会导致对h的更改检测异步调用完成时出现。您在何处以及如何初始化Firebase？能否将代码添加到您的问题中？刚刚添加了Firebase配置文件，该文件被注入到bug服务中，然后我参考了
public get database（）
在bug服务中。它会返回firebase数据库连接。我无法知道firebase-config.service在做什么。你使用了吗？这可能就是为什么，不好意思，但没关系。我会看看AngularFire2，也会阅读角度区域，因为我觉得这对我的学习很有帮助。谢谢你的帮助，祝你有一个愉快的一天/晚上。嘿，他们似乎在使用ChangeDetectorRef工作，当你说确保firebase在Angular内初始化时，我该怎么做？因为我觉得它在Angular 2内运行？抱歉，我不知道。我自己没有使用过firebase。但通常代码在Angular内初始化更改异步调用完成时发生的检测。您在何处以及如何初始化Firebase？您可以将代码添加到问题中吗？刚刚添加了Firebase配置文件，该文件被注入到bug服务中，然后我参考了
public get database（）
在bug服务中。它会返回firebase数据库连接。我无法知道firebase-config.service在做什么。你使用了吗？这可能就是为什么，不好意思，但没关系。我会看看AngularFire2，也会阅读角度区域，因为我觉得这对我的学习很有帮助。谢谢你的帮助，祝你一天/晚上愉快。@CodeRathet:你为什么又问这个问题，为什么不使用我为你写的答案