元器件數據需要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(); 
    },