web-dev-qa-db-fra.com

données cartographiques angular2 en tant que type d'objet spécifique

J'ai créé une application très simple basée sur le tutoriel Angular2.

Pour commencer, j'ai un modèle "Book" très simple:

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

À mon service, je reçois un livre comme celui-ci:

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

Je m'attendais à ce que cela obtienne les données JSON résultantes et les "mappe" à un objet Book.

Cependant, il renvoie juste un objet de type "Object".

Je pourrais créer moi-même un nouvel objet Book et passer les paramètres dans le constructeur, comme ceci:

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

Est-ce la meilleure façon de procéder? Ai-je oublié quelque chose?

angulartypescriptrxjs
9
Kris

Oui, la conversion d'un objet en un type dans TypeScript ne crée pas d'instance de ce type. C'est juste une fonctionnalité de TypeScript pour la vérification de type.

Si vous voulez réellement une instance de Book, vous devez utiliser quelque chose comme ça:

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

Pour répondre à votre question . En fait si vous n'avez que des champs dans votre type (avec une interface par exemple), le casting suffit. De plus, si vous avez des méthodes que vous souhaitez utiliser ultérieurement, il est nécessaire de créer implicitement une instance de type Book (voir ci-dessus) au lieu de transtyper. Sinon, vous ne pourrez pas les utiliser (ils ne seront pas définis sur votre objet) ...

Voir cette question pour plus de détails:

14
Thierry Templier

La bonne pratique consiste à consommer les données de la réponse GET en utilisant

Observable<Model>

(concernant Angular documentation https://angular.io/guide/http ) Et puis:

// importations

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

// dans la liste des paramètres du constructeur

private http: HttpClient

// méthode de service

getBook(): Observable<Book> {return this.http.get<Book>({url}, {options});}
5
Przemek Struciński

Je pense que vous devriez déclarer une interface Book au lieu de la classe book:

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

A votre service:

//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();
        });
4
dieuhd