web-dev-qa-db-ja.com

httpClient回答をモデルオブジェクトに変換する[Angular 6]

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の場合、I 参照しないMyClassのオブジェクトのインスタンス。

私は何を間違えていますか？this.http.get<MyClass[]>('api/stuff')と書くと変換が行われると思いました。

ヒントはありますか？前もって感謝します！

angulartypescriptangular6
10
Colja

その際、TypeScriptは「型の表明」のみを行います。これは、オブジェクトがMyClass型であることをTypeScriptに伝えているが、実行時にオブジェクトが実際にMyClassのインスタンスではないことを意味します。モデルオブジェクトで定義された関数を呼び出すには、モデルクラスでコンストラクターを次のように定義する必要があります。

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

次に、サービスに次のようなマッピングを追加します。

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

注：上記のコードはRxJS 6スタイルです。使用しているバージョンがわかりません

20
Twisting nether