I have integrated Firebase with Angular2 to retrieve an object.
import { Component, OnInit } from '@angular/core';
import { AngularFire, FirebaseObjectObservable } from 'angularfire2';
import { ActivatedRoute, Params } from '@angular/router';
@Component({
selector: 'app-example',
templateUrl: './example.component.html',
styleUrls: ['./example.component.css']
})
export class ExampleComponent implements OnInit {
fireObj: FirebaseObjectObservable<any>;
constructor(private af: AngularFire, private route: ActivatedRoute) {
}
ngOnInit() {
this.route.params.forEach((params: Params) => {
let id = params['id'];
this.fireObj = this.af.database.object("/path/" + id);
this.fireObj.subscribe(data => {
if(data.$value !== null) {
console.log(data);
}else {
console.log("failed");
}
});
});
}
}
In the template, I am binding fireObj:
<p>{{ (fireObj | async)?.title }}</p>
Although everything seems to be working correctly, sometimes there is a delay between when data is logged to the console and when the DOM/template actually updates. This delay can range from 5-10 seconds after the data is logged. Can anyone explain why this might be happening?