Angular HTTPで自動マッピングした後、オブジェクトのメソッドを呼び出す方法は?

user9669681

私はモデルを持っていますUser

export class User {
   id: number;
   roles: Role[];

   hasRole(role: string) { return true; }
}

また、ユーザーサービスでは、ジェネリックを使用して応答をそのモデルにマッピングしています。

getById(id: number) {
   return this.http.get<User>(`/api/v1/admin/users/${id}`);
}

そして、コンポーネントで、hasRoleメソッドを呼び出そうとしています

ngOnInit() {
    this.userService.getById(1).subscribe(data => this.user = data);
}

checkRole() {
   return this.user.hasRole();
}

電話した後checkRole、次のメッセージが表示されます。

TypeError:this.user.hasRoleは関数ではありません

どうすれば修正できますか?

Titian Cernicova-Dragomir

タイプパラメータを渡すとき、get実際にgetは内部で行うことを変更していません。つまり、サーバーからデータを取得し、それをオブジェクトに解析します(JSON.parseほとんどの場合を使用)。パラメータを渡す理由は、サーバーから取得するオブジェクトを入力するためですが、オブジェクトは実際にはクラスのインスタンスではなく、単純なオブジェクトのままです。この混乱を避けるために、typeパラメーターとしてフィールドのみを含むインターフェースを使用し、Userinのインスタンスを作成できますsubscribe

this.userService.getById(1).subscribe(data => this.user = Object.assign(new User(),  data));

または、よりタイプセーフな方法で、から返されたデータgetByIdが実際のインスタンスであると誰も思わないようにしますUser

type DataKeys<T> = { [P in keyof T] : T[P] extends Function ? never : P }[keyof T]
type Data<T> = Pick<T, DataKeys<T>>; 


getById(id: number) {
   return this.http.get<Data<User>>(`/api/v1/admin/users/${id}`);
}

this.userService.getById(1).subscribe(data => this.user = Object.assign(new User(),  data));

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

コンポーネントがHttpサービスメソッドを呼び出すかどうかのAngularユニットテスト:エラー:<spyOn>:スパイするオブジェクトが見つかりませんでした

分類Dev

Angular 5を使用してボタンクリックで複数のメソッドを呼び出す方法は?

分類Dev

Angular2でオブザーバブルなしでhttpメソッドを呼び出す方法

分類Dev

Angular JS:バックエンド呼び出し後にスコープ内のオブジェクト値を更新します

分類Dev

Angularで別のメソッドの後にメソッドを同期的に呼び出す方法は?

分類Dev

Angular 2 onInit vsinメソッドでのシングルトンクラスメソッド呼び出し

分類Dev

Angular2でhttp応答をマッピングしながら[オブジェクトオブジェクト]を取得する

分類Dev

AngularまたはAngular6のクロスオリジンリソースシェアリング(CORS)。異なるポートを使用してローカルホストでクロスドメイン呼び出しを行う際の問題

分類Dev

Angularプロジェクトをアップグレードした後、「Uncaught TypeError:Object.setPrototypeOfがnullまたはundefinedで呼び出されました」

分類Dev

ネストされたjsonオブジェクトをAngular11のモデルにマッピングする方法は?

分類Dev

AngularのHttpClientを介して取得されたオブジェクトのマッピング/非表示

分類Dev

サブスクリプションAngularの後にメソッドを呼び出す

分類Dev

Angularによって動的に作成されたオブジェクトでjQuery関数を呼び出します

分類Dev

メソッドなしでAngular $ resourceオブジェクトを通常のオブジェクトに変換する方法

分類Dev

Angular10でViewChildのパブリックメソッドを呼び出す方法

分類Dev

JSONオブジェクトをTypeScriptオブジェクトに自動的にマップします(Angular 2)

分類Dev

AngularのngOnInitでパラメーター化されたメソッドを呼び出す方法は?

分類Dev

JavaScript / TypeScript / Angular4でのオブジェクトURLマッピング

分類Dev

IONIC-MQTTプラグインはMessageArrivedの後にメソッドを呼び出しません| Angular 8+イオン

分類Dev

HTTP呼び出しの応答パラメーターをHTMLコードの事前定義されたパラメーターにマッピングする方法-Angular5

分類Dev

Angularの別のコンポーネントからメソッドを呼び出す方法は?

分類Dev

Angular:カスタムパラメーターを使用したJSONのオブジェクトへのマッピング

分類Dev

Angular HTTP呼び出しからJSONオブジェクトのプロパティをキャッチし、Angular CLIの「プロパティなし」エラーを修正するにはどうすればよいですか?

分類Dev

Angularは、呼び出されたメソッドではなく、OPTIONSの結果を返します

分類Dev

{{}}よりもテンプレートでAngularメソッドを呼び出すより効率的な方法は?

分類Dev

jQuerypromiseを解決した後にangular2メソッドを呼び出す方法

分類Dev

Angular:htmlでTypescriptメソッドを呼び出す方法

分類Dev

あるコンポーネントのメソッドを別のコンポーネントから呼び出す方法はangular2です。

分類Dev

親の html でクリックすると、Angular 2/Ionic で子メソッドを呼び出します

Related 関連記事

  1. 1

    コンポーネントがHttpサービスメソッドを呼び出すかどうかのAngularユニットテスト:エラー:<spyOn>:スパイするオブジェクトが見つかりませんでした

  2. 2

    Angular 5を使用してボタンクリックで複数のメソッドを呼び出す方法は?

  3. 3

    Angular2でオブザーバブルなしでhttpメソッドを呼び出す方法

  4. 4

    Angular JS:バックエンド呼び出し後にスコープ内のオブジェクト値を更新します

  5. 5

    Angularで別のメソッドの後にメソッドを同期的に呼び出す方法は?

  6. 6

    Angular 2 onInit vsinメソッドでのシングルトンクラスメソッド呼び出し

  7. 7

    Angular2でhttp応答をマッピングしながら[オブジェクトオブジェクト]を取得する

  8. 8

    AngularまたはAngular6のクロスオリジンリソースシェアリング(CORS)。異なるポートを使用してローカルホストでクロスドメイン呼び出しを行う際の問題

  9. 9

    Angularプロジェクトをアップグレードした後、「Uncaught TypeError:Object.setPrototypeOfがnullまたはundefinedで呼び出されました」

  10. 10

    ネストされたjsonオブジェクトをAngular11のモデルにマッピングする方法は?

  11. 11

    AngularのHttpClientを介して取得されたオブジェクトのマッピング/非表示

  12. 12

    サブスクリプションAngularの後にメソッドを呼び出す

  13. 13

    Angularによって動的に作成されたオブジェクトでjQuery関数を呼び出します

  14. 14

    メソッドなしでAngular $ resourceオブジェクトを通常のオブジェクトに変換する方法

  15. 15

    Angular10でViewChildのパブリックメソッドを呼び出す方法

  16. 16

    JSONオブジェクトをTypeScriptオブジェクトに自動的にマップします(Angular 2)

  17. 17

    AngularのngOnInitでパラメーター化されたメソッドを呼び出す方法は?

  18. 18

    JavaScript / TypeScript / Angular4でのオブジェクトURLマッピング

  19. 19

    IONIC-MQTTプラグインはMessageArrivedの後にメソッドを呼び出しません| Angular 8+イオン

  20. 20

    HTTP呼び出しの応答パラメーターをHTMLコードの事前定義されたパラメーターにマッピングする方法-Angular5

  21. 21

    Angularの別のコンポーネントからメソッドを呼び出す方法は?

  22. 22

    Angular:カスタムパラメーターを使用したJSONのオブジェクトへのマッピング

  23. 23

    Angular HTTP呼び出しからJSONオブジェクトのプロパティをキャッチし、Angular CLIの「プロパティなし」エラーを修正するにはどうすればよいですか?

  24. 24

    Angularは、呼び出されたメソッドではなく、OPTIONSの結果を返します

  25. 25

    {{}}よりもテンプレートでAngularメソッドを呼び出すより効率的な方法は?

  26. 26

    jQuerypromiseを解決した後にangular2メソッドを呼び出す方法

  27. 27

    Angular:htmlでTypescriptメソッドを呼び出す方法

  28. 28

    あるコンポーネントのメソッドを別のコンポーネントから呼び出す方法はangular2です。

  29. 29

    親の html でクリックすると、Angular 2/Ionic で子メソッドを呼び出します

ホットタグ

アーカイブ