JavaScript Angular Observables - push Item

-Rayz-

Lieutenant
Registriert
Okt. 2010
Beiträge
907
Guten Abend,
ich beschäftige mich gerade mit Angular (Version 6) und hänge nun seit ein paar Stunden an folgendem Problem.
Ein User kann mehrere Anschriften haben und nun möchte ich dem User eine Anschrift erstellen.
User Model wäre sowas:
export class User {
Id: string;
....
Anschriften: Anschrift[] = new Array();
}

Nun hole ich mir in der Component den User per in der ngOnInit Methode.
currentUser: User;
.....
this._userService.getUserById(this._id).subscribe(user => this.currentUser = user);

Die Methode im Service dazu sieht so aus:

getUserById(id: string): Observable<User> {
return this.http.get<User>(this._baseUrl + '/' + id)
.pipe(
map(value => this._user = value)
);
}

Nun rufe ich beim speichern der Anschrift meine create Methode auf und erstelle mir meine Anschrift:

this.anschrift = new Anschrift();
this.anschrift = {
.....
};

Dann wollte ich die Anschrift dem currentUser zuweisen.
this.user.pipe(
map(user => {
user.Anschriften.concat(this.anschrift);
})
)

Ob ich nun concat oder push benutze ist egal. Sowas als auch ist beides undefined. Es ist mir auch klar, dass ich hier synchronen Code mit Asynchronen kombiniere und das wohl auch die Ursache dafür ist. Allerdings finde ich einfach keine Lösung mit der ich in einem observerable ein Item pushen kann und anschließend dann das aktualisierte Model an meine API schicke.

Über einen Lösungsvorschlag wäre ich wirklich SEHR dankbar.
 
Puuuh... wo fängt man da am besten an?

Also:
1. Benutze bitte CODE Tags, damit man das auch ordentlich lesen kann. So ist das ziemlich mühsam.

2. Deine "getUserById" Service Methode funktioniert wahrscheinlich, aber sauber und verständlicher Code ist das nicht. Du solltest dir lieber noch mal ein paar Tutorials über Obervables, RxJS und vor allem Side Effects (!) ansehen. Du benutzt dort "map", aber was du da machst, hat wirklich rein gar nichts in einem map Operator zu suchen. Da geht's um Seiteneffekte und dafür gibt's den "tap" Operator. Wobei man auch sagen sollte, dass man Seiteneffekte soweit es geht vermeiden sollte, weil das Debugging die Hölle sein kann. Aber das kommt natürlich auch drauf an, was du da konkret machst. Manchmal geht's nicht ohne Side Effects.

3. "this.anschrift = new Anschrift(); ..." . Dann bitte auch noch ein Tutorial über JavaScript, TypeScript, Klassen, Objekte, Objektreferenzen, etc..
Warum benutzt du eine Anschrift Klasse, und überschreibst das Objekt danach direkt wieder mit einem neuen Objekt? In diesem Fall bringt dir die Klasse überhaupt nichts - abgesehen von der TypeScript Typisierung. Eigentlich noch schlimmer: Man könnte jetzt auf dem Objekt Methoden aufrufen, die zur Klasse gehören, weil TypeScript denkt: "da stand mal new Anschrift(), also ist das wohl ein Anschrift Objekt". Durch das Überschreiben mit "this.anschrift = { ... }" hast du aber im Endeffekt gar kein Objekt der Anschrift Klasse mehr.

4. "this.user.pipe(map(...))". Ich bin mir nicht wirklich sicher, was du dort vor hast. Daher 2 Antwortmöglichkeiten:
a) Hier ist der "map" Operator an der richtigen Stelle, aber völlig falsch verwendet.
b) Hier handelt es sich wieder um einen Seiteneffekt. Da hat "map" nichts verloren.
 
Zuletzt bearbeitet:
Abgesehen davon, dass es Usus ist, code conventions wie tslint zu verwenden und die Codefragmente kaum zu lesen sind sowie voriger kommentar bzgl map korrekt: der Fehler ist die falsche Verwendung von Array.concat. So gehts:
var a = [1,2];
var b = [98,99];
a.concat(b); // a immer noch 1,2
a = a.concat(b); // a jetzt 1,2,98,99
 
@LencoX2 Wie kommst du nun auf TSLint? Ich glaube kaum, dass TSLint irgendeinen dieser Fehler aufgedeckt hätte. Ist ja alles valider Code. Und wenn man in map unbedingt undefined returnen will, dann wird TSLint dich sicherlich nicht daran hindern.
 
benneque schrieb:
@LencoX2 Wie kommst du nun auf TSLint? Ich glaube kaum, dass TSLint irgendeinen dieser Fehler aufgedeckt hätte. Ist ja alles valider Code. Und wenn man in map unbedingt undefined returnen will, dann wird TSLint dich sicherlich nicht daran hindern.
Stimmt alles. War als Ergaenzung gedacht Bspw Ich hab erst nach mehrmaligem Lesen wahrgenommen dass Anschrift eine Variable ist kein Typ. Darum.
 
Anschriften ist Variable, Anschrift ist Klasse
Ja, stimmt schon. Da wäre es praktisch gewesen.
 

Ähnliche Themen

Zurück
Oben