Преобразование ответа httpClient в объекты модели [Angular 6]

Question

У меня есть вопрос по поводу Angular 5 httpClient.

Это класс модели с методом foo (), который я хотел бы получить с сервера

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

Это мой сервис, запрашивающий его:

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')
  }
}

Моя проблема

Когда я запрашиваю у службы случаи MyClass, я получаю данные, но не могу запустить {{ item.foo() }} в шаблоне.Кроме того, когда я console.log() typeof предмета, где он получен в службе, я не вижу экземпляров объекта MyClass.

Что я делаю не так? Я думал, что запись this.http.get<MyClass[]>('api/stuff') сделает преобразование.

Есть какие-нибудь подсказки?Заранее спасибо!

Answer 1

При этом TypeScript выполняет только «утверждение типа».Это означает, что вы говорите TypeScript, что ваш объект имеет тип MyClass, но на самом деле объект не является экземпляром MyClass во время выполнения.Чтобы вызвать функции, определенные в вашем объекте модели, вы должны определить конструкторы в ваших классах модели следующим образом:

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

Затем в ваших службах добавьте отображение, подобное этому:

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

Примечание: приведенный выше код выполнен в стиле RxJS 6, я не знаю, какую версию вы используете