Angular 2 map http Antwort auf Instanz der Klasse

Question

Ich frage mich, was der beste Weg ist, die HTTP-Antwort von einer Get-Anfrage auf eine Klasse anstelle eines grundlegenden Javascript-Objekts zuzuordnen.

In meinem aktuellen Versuch ich einfach tun new ClassName(data), aber es könnte eine obskure Angular angeben und völlig genial Weg, dies zu tun, dass ich nicht weiß.

Hier ist meine aktuellen Code:

getPost(id:number){ 
    return this._http.get(this._postsUrl+'/'+id) 
       .map(res => new Post(res.json().data)) 
       .do(data => console.log(data)) 
       .catch(this.handleError); 
} 

Ich brauche Stellen Sie eine Klasse zu sein und nicht nur eine Schnittstelle, weil ich Methoden innen haben.

folgte ich das HeroTutorial und das http „Entwicklerhandbuch“ zusammen und in ihrer getHeroes Methode, die sie tun:

getHeroes() { 
return this.http.get(this._heroesUrl) 
       .map(res => <Hero[]> res.json().data) 
       .catch(this.handleError); 
} 

ich irgendwie erwartet, dass der <Hero[]> Teil, genau das zu tun: die Heldenklasse nehmen und neue Instanzen erstellen davon, aber meine Tests zeigen, dass es nicht, das ist so ziemlich nur für Typescript zu wissen, was zu erwarten ist.

Irgendwelche Ideen? Vielen Dank!

Answer 1

Ich denke, dass Sie die map Methode von JavaScript-Objekte verwenden:

getHeroes() { 
    return this.http.get(this._heroesUrl) 
      .map(res => { 
       return res.json().data.map((elt) => { 
       // Use elt to create an instance of Hero 
       return new Hero(...); 
       }); 
      }) 
      .catch(this.handleError); 
} 

Answer 2

Durch die Einstellung der Prototyp auf dem Objekt zurückgegeben werden ich in der Lage war, eine Instanz meiner Klasse zu erhalten.

Meine Klasse war sehr einfach mit einem parameterlosen Konstruktor, so dass dies für mich funktionierte. Für komplexere Klassen weiß ich nicht, ob das funktionieren würde.

Hinweis: Der obige Code ist für getHero() nicht GetHeroes(). Ich würde annehmen, dass ich dasselbe mit einer Liste machen könnte, indem ich den Prototyp auf jedes Element im Array setze, aber ich habe das nicht versucht/bestätigt.

Referenz: mit

Observable<Model> 

(in Bezug auf die Winkel Dokumentation https://angular.io/guide/http) Ich habe die Idee für diese von this post von BMiner

Answer 3

Gute Praxis ist, Daten von GET-Antwort zu konsumieren So ...

// Importe

import {HttpClient} from "@angular/common/http"; 

// in Konstruktor Parameterliste

private http: HttpClient 

// Service-Methode

getHeroes(): Observable<Hero[]> {return this.http.get<Hero[]>({url}, {options});} 

Sie brauchen nichts mehr zu tun. Ich halte diesen Ansatz für äußerst freundlich.