CODEWITHSUNDEEP
firebasepromiseangularangular2-services
user5855304
user5855304

Reputation:

Promises in angular2 with firebase

Can someone explain how to correctly implement promise in Angular2 and Firebase.

I've read some articles such as this https://www.firebase.com/blog/2016-01-21-keeping-our-promises.html

in my app.component.ts file i have this

export class AppComponent{
    players: Player[];

    constructor(private _playerService: PlayerService){}

    getPlayers(){
        this._playerService.getPlayers().then(res => this.players = res);
    }

    ngOnInit(){
        this.getPlayers();
    }
}

inside the player.service.ts file I have this

getPlayers() {
    this.playersRef.once('value', function (snap){
        return snap.val();
    });
}

I always get TypeError: this._playerService.getPlayers(...) is undefined

I also tried this as the article on top suggests

getPlayers() {
    var data;
    this.playersRef.once('value').then( function (snap){
        data = snap.val();
    });
    return data;
}

But then i get this: Error: Query.once failed: Was called with 1 argument. Expects at least 2. in [null]

I'm not sure how the article is working at all with .once('value').then()

Upvotes: 2

Views: 832

Answers (1)

Pankaj Parkar
Pankaj Parkar

Reputation: 136184

Problem occurs because you are trying to using .then over a method which isn't using promise. Basically missed to return promise from getPlayers method, you should return promise from there to perform promise chaining using .then method over it.

Also don't use callback to return value from it(because callback are not capable of returning anything from it), use .then function over .once so that you can extend promise chain & will be able to return out data correctly.

Code

getPlayers() {
    //returned promise here
    return this.playersRef.once('value').then((snap) => {
        return snap.val();
    });
}

Upvotes: 4

Related Questions