Ich versuche gerade, mir Angular2 und TypeScript beizubringen, nachdem ich in den letzten 4 Jahren glücklich mit AngularJS 1 * gearbeitet habe! Ich muss zugeben, dass ich es hasse, aber ich bin mir sicher, dass mein Eureka-Moment gleich um die Ecke ist ... trotzdem habe ich in meiner Dummy-App einen Dienst geschrieben, der http-Daten von einem falschen Backend abruft, das ich geschrieben habe und das JSON dient.
import {Injectable} from 'angular2/core';
import {Http, Headers, Response} from 'angular2/http';
import {Observable} from 'rxjs';
@Injectable()
export class UserData {
constructor(public http: Http) {
}
getUserStatus(): any {
var headers = new Headers();
headers.append('Content-Type', 'application/json');
return this.http.get('/restservice/userstatus', {headers: headers})
.map((data: any) => data.json())
.catch(this.handleError);
}
getUserInfo(): any {
var headers = new Headers();
headers.append('Content-Type', 'application/json');
return this.http.get('/restservice/profile/info', {headers: headers})
.map((data: any) => data.json())
.catch(this.handleError);
}
getUserPhotos(myId): any {
var headers = new Headers();
headers.append('Content-Type', 'application/json');
return this.http.get(`restservice/profile/pictures/overview/${ myId }`, {headers: headers})
.map((data: any) => data.json())
.catch(this.handleError);
}
private handleError(error: Response) {
// just logging to the console for now...
console.error(error);
return Observable.throw(error.json().error || 'Server error');
}
}
Jetzt möchte ich in einer Komponente sowohl getUserInfo()
als auch getUserPhotos(myId)
Methoden ausführen (oder verketten) . In AngularJS war dies einfach, da ich in meinem Controller so etwas tun würde, um die "Pyramide des Untergangs" zu vermeiden ...
// Good old AngularJS 1.*
UserData.getUserInfo().then(function(resp) {
return UserData.getUserPhotos(resp.UserId);
}).then(function (resp) {
// do more stuff...
});
Jetzt habe ich versuche , etwas zu tun , ähnlich wie in meiner Komponente ( als Ersatz .then
für .subscribe
) aber meine Fehler - Konsole verrückt zu werden!
@Component({
selector: 'profile',
template: require('app/components/profile/profile.html'),
providers: [],
directives: [],
pipes: []
})
export class Profile implements OnInit {
userPhotos: any;
userInfo: any;
// UserData is my service
constructor(private userData: UserData) {
}
ngOnInit() {
// I need to pass my own ID here...
this.userData.getUserPhotos('123456') // ToDo: Get this from parent or UserData Service
.subscribe(
(data) => {
this.userPhotos = data;
}
).getUserInfo().subscribe(
(data) => {
this.userInfo = data;
});
}
}
Ich mache offensichtlich etwas falsch ... wie würde ich am besten mit Observables und RxJS umgehen? Entschuldigung, wenn ich dumme Fragen stelle ... aber danke für die Hilfe im Voraus! Ich habe auch den wiederholten Code in meinen Funktionen beim Deklarieren meiner http-Header bemerkt ...
quelle
this.userData.getUserInfo()
?this.userData.getUserPhotos(), this.userData.getUserInfo()
stattthis.userData.getUserPhotos, this.userData.getUserInfo()
. Es tut uns leid!import { forkJoin } from 'rxjs';
, um die Funktion zu importieren. Außerdem ist forkJoin kein Mitglied von Observable mehr, sondern eine separate Funktion. Also anstattObservable.forkJoin()
nurforkJoin()
.