angular2 Kartendaten als spezifischer Objekttyp

Question

Ich habe eine sehr einfache App basierend auf dem Angular2 Tutorial erstellt.

zu starten, ich habe ein sehr einfaches „Buch“ -Modell:

/** 
* book model 
*/ 
export class Book { 
    public data; 

    /** 
    * constructor 
    * @param id 
    * @param title 
    * @param pages 
    */ 
    constructor(
     public id, 
     public title:string, 
     public pages:Array 
    ){ 
     alert('it works'); // just a check 
    } 
} 

In meinem Dienst, erhalte ich ein Buch wie diese:

return this._http.get('getBook/1') 
     .map(function(res){ 
      return <Book> res.json(); 
     }) 

war meine Erwartung, dass dies das bekommen würde resultierende JSON-Daten und "mappen" sie zu einem Book-Objekt.

Es wird jedoch nur ein Objekt vom Typ "Objekt" zurückgegeben.

konnte ich ein neues Buch-Objekt selbst und übergeben Sie die Parameter im Konstruktor wie folgt erstellen:

return new Book(res.id, res.title, res.pages); 

Ist dies der beste Weg, dies zu tun? Habe ich etwas verpasst?

Answer 1

Ja, wenn ein Objekt in TypeScript in einen Typ umgewandelt wird, wird keine Instanz dieses Typs erstellt. Es ist nur eine Möglichkeit von TypeScript für die Typprüfung.

Wenn Sie tatsächlich eine Instanz von Book wollen Sie so etwas verwenden müssen:

return this._http.get('getBook/1') 
    .map(function(res){ 
     var data = res.json(); 
     return new Book(data.id, data.title, data.pages); 
    }) 

Ihre Frage zu beantworten. Wenn Sie nur Felder in Ihrem Typ haben (z. B. mit einer Schnittstelle), ist Casting ausreichend. Wenn Sie Methoden haben, die Sie später verwenden möchten, müssen Sie implizit eine Instanz des Typs Book (siehe oben) anstelle des Castings erstellen. Andernfalls werden Sie nicht in der Lage sein, sie zu benutzen (sie werden auf dem Objekt nicht definiert werden) ...

diese Frage finden Sie weitere Details:

• How do I cast a JSON object to a typescript class

Answer 2

ich glaube, Sie sollten eine Schnittstelle Book statt Klasse deklariert book:

export interface Book { 
    public id; 
    public title:string; 
    public pages:Array; 
} 

In Ihren Diensten:

//get one record 
return this._http.get('getBook/1') 
     .map(function(res){ 
      return <Book> res.json(); 
     }); 

//get multi record 
return this._http.get('getBooks') 
     .map(function(res){ 
      return <Book> res.json(); 
     }); 

Answer 3

Gute Praxis ist, Daten von GET-Antwort zu konsumieren

Observable<Model> 

(in Bezug auf die Winkel Dokumentation https://angular.io/guide/http) mit Und dann:

// Importe

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

// in der Konstruktorparameterliste

private http: HttpClient 

// Service-Methode

getBook(): Observable<Book> {return this.http.get<Book>({url}, {options});}