Typescript Fehler beim Abrufen von HTTP-Optionen von Angular Service

Question

Ich versuche, eine HTTP-GET-Anfrage mit Angular 4 und HttpClient/HttpHeaders von @ Angular/Common/http. Hier ist, wie meine Anfrage aussieht:

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"); 
    } 
); 
} 

Dieser Code funktioniert gut. Mein Partner und ich haben jedoch entschieden, dass wir einige dieser Informationen nicht in jede Komponente einbeziehen müssen und haben uns entschieden, einen Dienst zum Erstellen von Abfragen zu erstellen. Hier ist, wie das aussieht:

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

Und der eingestellte Code in der Komponente, die die Service-Injektion wie folgt aussieht:

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"); 
    } 
); 
} 

Wir kehren die gleichen genauen Werte wie vorher, aber jetzt von diesem Service. Allerdings bekommen wir jetzt einen Typoskript Fehler auf den „Daten“ Funktionsparametern Angabe

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

Ich kann nicht für das Leben von mir herauszufinden, warum wir einen Fehler bekommen, wenn wir die gleichen genauen Werte zurückkehren. Warum kommt der Typ nicht mehr als [] zurück? Ich habe überprüft, dass der Parameter queryURL funktioniert, unabhängig davon, ob er in getPhysician erstellt oder aus dem QueryBuilderService abgerufen wird. Es sind die Optionen, die dieses Tippproblem verursachen.

EDIT Hier ist, was zurückgegeben wird, wenn wir den Aufruf der ursprünglichen Art und Weise machen: Hinweis, diese Testdaten alle gerade ist. Keine wirklich sensiblen Informationen hier.

Jede Hilfe ist sehr geschätzt

Answer 1

Nun, dank @GreyBeardedGeek ich meine Lösung gefunden zu haben. Ich musste explizit einen Rückgabetyp des Objekts zu meiner Funktion getRequestOptions() erklären. Im Wesentlichen, ohne genau zu wissen, dass die Funktion einen Objekttyp zurückgibt, wird standardmäßig der Typ HttpEvent verwendet.

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

Answer 2

Aus der Dokumentation für HttpClient:

Der responseType Wert legt fest, wie eine erfolgreiche Antwort Körper analysiert werden Weitere Informationen finden Sie unter diesem Link zu finden. Wenn responseType der Standardwert json ist, kann eine Typschnittstelle für das resultierende Objekt als Typparameter an request() übergeben werden.

Ich bin ehrlich gesagt nicht sicher, was zwischen dem ersten und dem zweiten Versuch wurde geändert, die es brechen würde, aber Sie bekommen HttpEvent als Antwort. Sie können dies in ein paar Möglichkeiten ändern:

1. hinzufügen responseType: 'json' den requestOptions
2. observe: 'body' In den requestOptions
3. Aktualisieren Sie Ihre .subscribe Rückruf zu behandeln HttpEvent, z.B.

request.subscribe((event: HttpEvent) => { 
    if (event.type === HttpEventType.response) { 
    event.body.forEach(physician => { /* logic */ }); 
    } 
}, 

Basierend auf den anderen Kommentare und Antworten, sollten Sie auch requestOptions: Object statt requestOptions: any und/oder getRequestOptions aktualisieren Art von Object zurückzukehren.