将 httpClient 答案转换为模型对象 [Angular 6]

Question

我对 Angular 5 httpClient 有疑问。

这是一个模型class，我想从服务器接收一个方法 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 只会做 "type assertion"。这意味着您告诉 TypeScript 您的对象是 MyClass 类型，但该对象在运行时实际上并不是 MyClass 的实例。为了调用模型对象中定义的函数，您必须像这样在模型中定义构造函数类 :

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

然后在您的服务中添加这样的映射：

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

注意：上面的代码是RxJS 6风格的，不知道你用的是哪个版本

Answer 2

这样对我有用

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

...
this.httpClient.get<MyResponse>('http://......').toPromise()
      .then((myResponse) => {
        console.log('myResponse.myField: ' + JSON.stringify(tokenResponse));
      })
      .catch((error) => {
        console.log('Promise rejected with ' + JSON.stringify(error));
      });

...
interface MyResponse {
  myField: string;
  myOtherField: string;
}

将 httpClient 答案转换为模型对象 [Angular 6]

Converting httpClient answer to model objects [Angular 6]

javascript

typescript

angular

angular6

我的问题