dati mappa angular2 come tipo di oggetto specifico

Question

Ho creato un'applicazione molto semplice basata sul tutorial di Angular2.

Per cominciare, ho un modello molto semplice "libro":

/** 
* 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 
    } 
} 

Nel mio servizio, ho un libro come questo:

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

La mia aspettativa era che questo avrebbe avuto la i dati JSON risultanti e "mappali" su un oggetto Book.

Tuttavia, restituisce solo un oggetto con tipo "Oggetto".

ho potuto creare un nuovo oggetto libro me stesso e passare i parametri nel costruttore, in questo modo:

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

E 'questo il modo migliore per farlo? Ho dimenticato qualcosa?

Answer 1

Sì, la trasmissione di un oggetto a un tipo in TypeScript non crea un'istanza di questo tipo. È solo una funzionalità di TypeScript per il controllo dei tipi.

Se si vuole in realtà un'istanza di Book è necessario usare qualcosa di simile:

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

per rispondere alla tua domanda. Infatti se hai solo campi nel tuo tipo (con un'interfaccia per esempio), il casting è sufficiente. Inoltre se hai metodi che vuoi usare in seguito, è necessario creare implicitamente un'istanza del tipo Book (vedi sopra) invece di lanciare. In caso contrario, non sarà in grado di usarli (saranno indefiniti sul vostro oggetto) ...

Vedere questa domanda per maggiori dettagli:

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

Answer 2

Penso che si dovrebbe dichiarare un'interfaccia Book al posto di classe book:

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

Nel vostro servizio:

//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

buona pratica è quello di consumare i dati di risposta GET utilizzando

Observable<Model> 

(per quanto riguarda la documentazione angolare https://angular.io/guide/http) E poi:

// importazioni

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

// nella lista dei parametri del costruttore

private http: HttpClient 

// metodo di servizio

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