元器件数据需要18秒，以在页面上显示

Question

我有一个角2应用程序，我有一个简单的页面，它由一个HTML表格的，对于HTML页面我打电话，其连接到火力3和服务组件内检索从给定的表中的值，表看起来是这样的：

我bug.componenet.ts看起来是这样的：

import { Component, OnInit } from '@angular/core'; 
import { BugService } from '../service/bug.service'; 
import { Bug } from '../model/bug'; 


@Component({ 
    selector: 'bug-list', 
    templateUrl: './bug-list.component.html', 
    styleUrls: ['./bug-list.component.css'] 
}) 

export class BugListComponent implements OnInit { 

    private bugs: Bug[] = []; 

    constructor(private bugService: BugService) { } 

    ngOnInit() { 
     this.getAddedBugs(); 
    } 


    getAddedBugs() { 
     this.bugService.getAddedBugs().subscribe(bug => { 
      this.bugs.push(bug); 
     }, 
     err => { 
      console.error("unable to get added bug - ", err); 
     }); 
    } 

    } 

的BugService：

import { Injectable } from '@angular/core'; 

//Observables 
import { Observable } from 'rxjs/Observable' 

// Services 
import { FirebaseConfigService } from '../../core/service/firebase-config.service'; 

// Models 
import { Bug } from '../model/bug'; 


@Injectable() 
export class BugService { 

// being my firebase database connection. 
private bugsDbRef = this.fire.database.ref('/bugs'); 

constructor(private fire: FirebaseConfigService) { 

    console.log(this.bugsDbRef); 

} 

getAddedBugs(): Observable<any> { 
    return Observable.create(obs => { 
     this.bugsDbRef.on('child_added', bug => { 
      const newBug = bug.val() as Bug;   
      console.log(newBug); 
      obs.next(newBug); 
     }, 
     err => { 
      obs.throw(err) 
     }); 
    }); 
} 
} 

现在的bug.html页：

<tbody> 
    <tr *ngFor="let bug of bugs"> 
    <td>{{ bug.title }}</td> 
    <td>{{ bug.status }}</td> 
    <td>{{ bug.severity }}</td> 
    <td>{{ bug.description }}</td> 
    <td>{{ bug.createdBy }}</td> 
    <td>{{ bug.createdDate }}</td> 
    </tr> 
</tbody> 

这使得：

我的问题是，当我加载页面，我不得不等待至少18秒之前，从表中显示的Firebase错误出于某种原因...但是在服务内部时，我立即出现了它们console.log(newBug);。

有人可以解释可能导致此问题的原因吗？

感谢

** **更新

这是从引用的bug.service.ts

import { Injectable } from '@angular/core'; 

import * as firebase from 'firebase'; 
require('firebase/database'); 

// Constants 
import { FIREBASE_CONFIG } from '../constant/constants'; 

@Injectable() 
export class FirebaseConfigService { 

private _database: firebase.database.Database; 

constructor() { 
    this.configureApp(); 
    this.configureDatabase(); 
} 

public get database(){ 
    return this._database; 
} 

configureApp() { 
    firebase.initializeApp(FIREBASE_CONFIG); 
} 

configureDatabase() { 

    this._database = firebase.database(); 


} 

} 

中我注入到上述的bug我的火力cofiguration文件。服务构造函数。

Answer 1

这似乎是没有运行变化检测。

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

要么确保火力地堡里面被初始化角或调用变化检测明确地

constructor(private bugService: BugService, private cdRef:ChangeDetectorRef) { } 

getAddedBugs() { 
    this.bugService.getAddedBugs().subscribe(bug => { 
     this.bugs.push(bug); 
     this.cdRef.detectChanges(); 
    },