Question

我有一个角度2应用程序，我有一个简单的页面，包含一个HTML表格，在HTML页面的组件内部我称之为连接到Firebase 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);时他们在服务中立即出现。

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

谢谢

**更新**

这是我的firebase配置文件，它是从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.service构造函数中。

Answer 1

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

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

确保在Angular中初始化Firebase或明确调用更改检测

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

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

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

1 个答案: