I am fetching user data from firebase database, and binding class object with that data. Data fetching is working fine, But when I try to bind it with class object in typescript file, it is showing warning "No implementation found for object", but I have already declare object.
Below is my code,
import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { AngularFireAuth, AngularFireAuthProvider } from 'angularfire2/auth';
import * as firebase from 'firebase/app';
import { Router } from '@angular/router';
import { UserInfo } from "./models/userInfo";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
user: Observable<firebase.User>;
currentUser : Observable<UserInfo>;
constructor(public afAuth: AngularFireAuth, public router: Router) {
this.user = afAuth.authState;
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
let fireBaseUser = firebase.auth().currentUser;
if(fireBaseUser)
{
console.log("fire - ", fireBaseUser.uid);
this.currentUser = firebase.database().ref('/users/' + fireBaseUser.uid).once('value').then(function(snapshot) {
console.log(snapshot.val());
return snapshot.val();
});
}
} else {
router.navigateByUrl('/login');
}
});
}
}
Below is my view,
user.uid - <div> {{ (user | async)?.uid }} </div> // display correct value
<div> cc - {{ currentUser }} </div> // empty.
Below is error,
I guess, the problem is, I am trying to fill currentUser object in Observable scope. So it is not able to found my initialized object. What do I need to change to make it work.