1
votes

Comment mapper la réponse http au type de modèle client dans Angular

J'ai le modèle MyObejct comme celui-ci dans le client:

getMyObejct(name: string): Observable<MyObject> {
 const url = this.url + 'name/' + name;
 return this.http.get<MyObject>(url);  // This is part I'm confused
}

getAllObjects(): Observable<MyObject[]> {
 return this.http.get<MyObject>(this.url); // How to map this reponse to MyObject
}

Et les données de la réponse http json comme celle-ci:

[
 {
  id: "1",
  name: "object1",
  active: "true",
 }
]

La réponse http est une paire clé-valeur, et tout le type de valeur est une chaîne. Alors, comment puis-je mapper la réponse http au type «MyObject». La fonction http get est comme ceci:

class MyObject{
 id: number;
 name: string;
 active: boolean;
}

Les valeurs de réponse http sont toutes de type chaîne, mais MyObject a des types number et boolean. Comment puis-je faire cela?

angular http response

0 commentaires

3 Réponses :

1
votes

Cela dépend si vous avez vraiment besoin d'une instance de MyObject, ou simplement de quelque chose avec les mêmes propriétés.

Si vous avez juste besoin d'un objet avec les mêmes propriétés, vous pouvez faire:

return this.http.get<MyObject>(url).map( (obj) => Object.assign(new MyObject(), {
  id: Number(obj.id), 
  name: obj.name,
  active: obj.active === 'true'
}));

0 commentaires

0
votes

Vous voudrez peut-être examiner class-transformer . La méthode plainToClass transforme un objet javascript brut en une instance d'une classe spécifique.

class MyPayload {
  prop: string
}

const result1 = plainToClass(MyPayload, { prop: 1234 }, { enableImplicitConversion: true });

/**
 *  result1 will be `{ prop: "1234" }` - notice how the prop value has been 
 *  converted to string.
 */

Dans votre cas, vous devrez activer la conversion de type implicite: p>

import {plainToClass} from "class-transformer";

fetch(url).then((objects: MyObject[]) => {
    const realMyObjects = plainToClass(MyObject, objects);
    // now each object in realMyObjects is an instance of MyObject class
});

0 commentaires

0
votes

Pour spécifier le type d'objet de réponse, définissez d'abord une interface avec les propriétés requises . (Utilisez une interface plutôt qu'une classe; une réponse ne peut pas être automatiquement convertie en une instance d'une classe.)

interface MyObject{
 id: number;
 name: string;
 active: boolean;
}

getAllObjects(): Observable<MyObject[]> {
 return this.http.get<MyObject>(this.url); // now returns an Observable of MyObject[]
}

Pour en savoir plus, cliquez ici - https://angular.io/guide/http#typechecking-the-response

0 commentaires