2016-05-12 9 views
1

ich eine Typoskript Funktion in meinem Angular 2 App haben, die eine beobachtbare zurückgibt, Web-API-Daten zurück an den Verbraucher, so etwas zu schieben:Chaining RxJs Observable in Angular 2

public getApiData(): Observable { 
    let readySource = Observable.from('no', 'no', 'ready'); 
    let dataSource = http.get('api/getData'); 
    // ... magic here 
    return chainedObservable; 
} 

jedoch eher als die http.get Observable als normal zurückgeben, muss ich diese HTTP-Aufruf zu einem anderen readySource Observable, die angibt, ob die API bereit ist, um zu rufen (es überprüft tatsächlich, ob ein Hintergrund Datensynchronisierungsjob abgeschlossen ist) zu verketten.

Wie kann ich diese zwei Observables miteinander verketten, so wird der HTTP-Aufruf nur aufgerufen, wenn der readySource einen bestimmten Wert drückt, z. "bereit"?

(Beachten Sie, dass Vanille flatMap/Select nicht ganz die Forderung hier treffen, weil ich warten müssen, bis die erste beobachtbare die zweite vor dem Aufruf einen bestimmten Wert drückt.)

Antwort

5

ich den filter Operator mischen würde mit die flatMap eins. Das folgende Beispiel beschreibt, wie die Anforderung auslöst, wenn der Benutzer einen bestimmten Wert füllt (‚ready‘ hier):

@Component({ 
    selector: 'my-app', 
    template: ` 
    <input [ngFormControl]="ctrl"/> 
    <button (click)="onClick()">Click</button> 
    ` 
}) 
export class AppComponent { 
    constructor(private http:Http) { 
    this.ctrl = new Control(); 
    let readySource = this.ctrl.valueChanges.filter((val) => val === 'ready'); 
    readySource.flatMap(() => http.get('data.json')).subscribe(() => { 
     console.log('test'); 
    }); 
    } 
} 

dieses plunkr Siehe: https://plnkr.co/edit/yZL1wRw7GYhUkkhnL9S0?p=preview

Verwandte Themen