2017-12-22 10 views
0

Angular 4とHttpClient/HttpHeadersを@Angle/Common/httpから使用してHTTP GETリクエストを作成しようとしています。私の要求は次のようになります:角型サービスからHTTPオプションを取得すると、Typescriptエラーが発生する

getPhysicians() { 
    let queryURL, queryOptions; 

    queryURL = "http://path/to/our/backend/pathologists"; 

    queryOptions = { 
    headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded'), 
    withCredentials: true 
    }; 

    let request = this.http.get<any[]>(queryURL, queryOptions); 

    request.subscribe(
    data => { 
     data.forEach((physician) => { // no problems here 
     // some logic with the response items 
     }) 
    }, 

    err => { 
     console.log("Error retrieving physicians"); 
    } 
); 
} 

このコードはうまくいきます。しかし、私のパートナーと私は、すべてのコンポーネントにこの情報の一部を含める必要はなく、クエリ構築サービスを作ることに決めたと思います。

import { Injectable } from '@angular/core'; 
import { HttpHeaders } from '@angular/common/http'; 

@Injectable() 
export class QueryBuilderService { 

    baseURL: string = "http://path/to/our/backend/" 

    requestOptions: any = { 
    headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded'), 
    withCredentials: true 
    }; 

    constructor() { } 

    getRequestOptions() { 
    return this.requestOptions; 
    } 

    getAllPhysiciansQuery() { 
    return this.baseURL + "pathologists"; 
    } 
} 

とサービスを注入するコンポーネントで調整するコードは次のようになります:ここではそれは次のようになります

getPhysicians() { 
    let queryURL, queryOptions; 

    queryURL = this.queryBuilderService.getAllPhysiciansQuery(); 

    queryOptions = this.queryBuilderService.getRequestOptions(); 

    let request = this.http.get<any[]>(queryURL, queryOptions); 

    request.subscribe(
    data => { 
     data.forEach((physician) => { // this line now throws a compilation error 
     // some logic with the response items 
     }) 
    }, 

    err => { 
     console.log("Error retrieving physicians"); 
    } 
); 
} 

我々は今、このサービスから、以前と同じ正確な値を返しています。しかし、我々は今、我々は同じ正確な値を返している場合、我々は、エラーを取得している理由は、私は私の人生のために把握することはできません

Property 'forEach' does not exist on type 'HttpEvent<any[]>'. 
Property 'forEach' does not exist on type 'HttpSentEvent'. 

を述べ、「データ」関数パラメータの活字体のエラーを取得します。なぜタイプはもう[]と戻ってこないのですか? getPhysiciansで作成されたものでも、QueryBuilderServiceから取得されたものでも、queryURLパラメータが機能することを確認しました。このタイプの問題を引き起こすのはオプションです。 This is all just test data, not true sensitive information. 注、これはすべて単なるテストデータである:ここで

EDIT たちは、コール元の道を作るときに返されるものです。実際の機密情報はここにありません。

すべてのヘルプは非常に、私は私の解決策を見つけた@GreyBeardedGeekのおかげで

+0

あなたのデータはどのように見えますか?あなたconsole.logできますか? – Farasi78

+0

@ Farasi78説明を編集してその情報のスクリーンショットを作成しました。 –

+0

2番目の方法を使用すると、応答からデータをログに記録できますか?あなたがforEachループを削除しても、まだ生の応答をログに記録できるはずです。私は配列の型配列を作成していると思うので、データ[0] .forEach ....のようなものが必要になるでしょう。ちょうど推測すると、ログに記録すればもっと簡単になります。 – Farasi78

答えて

0

まあ感謝されます。私は、getRequestOptions()関数にObjectの戻り値の型を明示的に宣言する必要がありました。本質的に、関数がObjectの型を返すことを特に知らないと、デフォルトでHttpEvent型になります。詳しい情報は、このリンクで見つけることができます:

Property 'data' does not exist on type 'HttpEvent<Customer>'

0

ドキュメントからHttpClientのために:

responseType値が正常な応答本体が解析される方法を決定します。 responseTypeがデフォルトのjsonの場合、結果のオブジェクトのタイプインタフェースは、タイプパラメータとしてrequest()に渡されます。

あなたの最初と2番目の試行の間に何が変更されたのかよく分かりませんが、回答としてはHttpEventが返されています。あなたはいくつかの方法でこれを変更することができます。

  1. responseType: 'json'
  2. requestOptionsに observe: 'body'
  3. requestOptionsにを追加HttpEvent、例えばを処理するために、あなたの .subscribeコールバックを更新します
request.subscribe((event: HttpEvent) => { 
    if (event.type === HttpEventType.response) { 
    event.body.forEach(physician => { /* logic */ }); 
    } 
}, 

他のコメントと回答に基づいて、あなたはまた、Objectの種類を返すためにrequestOptions: anyおよび/または更新getRequestOptionsの代わりにrequestOptions: Objectを使用する必要があります。

関連する問題