web-dev-qa-db-fra.com

Conversion de la réponse httpClient en objets de modèle [Angular 6]

J'ai une question sur le Angular 5 httpClient.

Ceci est une classe modèle avec une méthode foo () que j'aimerais recevoir du serveur

export class MyClass implements Deserializable{
  id: number;
  title: string;

  deserialize(input: any) {
    Object.assign(this, input);
    return this;
  }

  foo(): string {
    // return "some string conversion" with this.title
  }
}

C'est mon service qui le demande:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { MyClass } from './MyClass';

@Injectable({
  providedIn: 'root',
})
export class MyClassService {

  constructor(private http: HttpClient) {
  }

  getMyStuff(): Observable<MyClass[]> {
    // this is where I hope to convert the json to instances of MyClass
    return this.http.get<MyClass[]>('api/stuff')
  }
}

Mon problème

Lorsque je demande au service des instances de MyClass j'obtiens les données, mais je ne peux pas exécuter {{ item.foo() }} dans le modèle. De plus, lorsque je console.log() le typeof d'un élément où il est reçu dans le service, je ne vois pas instances d'un objet de MyClass.

Qu'est-ce que je fais mal? Je pensais que l'écriture de this.http.get<MyClass[]>('api/stuff') ferait la conversion.

Des indices? Merci d'avance!

angulartypescriptangular6
10
Colja

Ce faisant, TypeScript ne fait que "l'assertion de type". Cela signifie que vous dites à TypeScript que votre objet est de type MyClass, mais que l'objet n'est en fait pas une instance de MyClass au moment de l'exécution. Pour appeler des fonctions définies dans votre objet modèle, vous devez définir des constructeurs dans vos classes de modèle comme ça:

constructor(obj?: any) {
    Object.assign(this, obj);
}

Ensuite, dans vos services, ajoutez un mappage comme celui-ci:

http.get<MyClass>('/my-class').pipe(
      map(res => new MyClass(res))

Remarque: le code ci-dessus est de style RxJS 6, je ne sais pas quelle version vous utilisez

20
Twisting nether