Angular 2 Observable alternative Syntax

Import {UserService} von './Users/edwardhung/Desktop/timesheet-web-app/timesheet-web-app-new/src/app/services/user.service'; Ich benutze Winkel 2 mit Firebase. Zurzeit habe ich die folgende Funktion, die eine UID benötigt, um zu einem der Zweige in Firebase zu gehen, um nach Daten zu suchen, die den Pfad speichern, wo die Benutzerinformationen gespeichert sind. Wenn die Daten zurück sind, habe ich eine zweite Anfrage erstellt, um diese Daten basierend auf dem Pfad abzurufen.Angular 2 Observable alternative Syntax

von UserService.ts

getUserInformation(uid: string) { 
    return this.angularFire.database.object('/pathForUid/' + uid).map(results => { 
     return this.angularFire.database.object('/' + results.path) 
    }); 
}

Und das ist, wie ich die Funktion aufrufen

this.userService.getUserInformation(data.uid) 
    .subscribe(result => { 
    result.subscribe(res => { 
     let user: User = res; 
     this.userService.setCurrentUser(user); 
    }) 
});

Alles funktioniert hier gut, außer ich diese Syntax abit seltsam mit den beiden Rück bin zu finden und zwei abonnieren. Als ich in Swift programmiert habe, war es nur Call Backs innerhalb von Call Backs, ohne zweimal zurückkommen oder zweimal abonnieren zu müssen.

Ist dies der einzige und richtige Weg dies zu tun oder gibt es eine alternative Syntax, so dass ich nicht zweimal abonnieren muss? Für mich macht es eigentlich keinen Sinn, zwei Abonnenten zu haben, bei denen ich die Funktion anrufe. Ich denke vielleicht gibt es einen Weg gibt, etwas wie das folgende

this.userService.getUserInfoInOneGoWithId(data.uid) 
    .subscribe(result => { 
    let user: User = result; 
});

Quelle

2017-02-03 user172902

Sieht so aus, als ob Sie zwei Observables ** verketten möchten, was normalerweise mit [.mergeM ap()] (http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-mergeMap) -Operator. Die Syntax geht etwa so wie 'obs1.mergeMap (obs2)', wobei 'obs2' die Daten return by' obs1' verwenden kann und das Ergebnis mit den üblichen Operatoren transformiert. Schauen Sie sich hier ein Beispiel an: http://StackOverflow.com/a/42021832/1153681 – AngularChef

Wie @AngularFrance sagte zu tun, Sie wollen Ihre Observablen Kette.

Aber statt mergeMap verwenden, können Sie switchMap verwenden:

// mock the service which returns http response (observable) 
// return a user for some uid 
const someService = 
    (uid) => 
    Observable 
     .of({ user: 'Unicorn' }) 
     // simulate an HTTP delay 
     .delay(1500) 

const { Observable } = Rx 

const obs = Observable.of({ uid: 'some-uid' }) 

obs 
    .do(_ => console.debug('starting an http request')) 
    .switchMap(uid => 
    someService(uid) 
     .do(_ => console.log('response received !')) 
     .map(user => console.debug(user)) 
) 
    .subscribe()

Das Ergebnis ist:

// output instantly : 
starting an http request 

// outputs 1.5s later : 
response received ! 
{user: "Unicorn"}

Hier ist ein Arbeits Plunkr:
https://plnkr.co/edit/s7YUROGAJ9RzHxj5vi82?p=preview (öffnen Sie Ihre Konsole)

Quelle

2017-02-03 13:47:16 Maxime

Angular 2 Observable alternative Syntax

Antwort

Verwandte Themen