Angular2 - HTTP RequestOptions HEADERS

73

Ich habe derzeit ein Problem mit tslint und hoffte, jemand könnte mich in die richtige Richtung weisen.

Ich versuche, eine HTTP-GET-Anforderung über HTTP zu senden, das vom Angular2-Framework bereitgestellt wird. Bei dieser Anfrage muss ich den Inhaltstyp und das Inhaberauthentifizierungstoken angeben.

Beispiel für meinen Code:

let headers = new Headers();
let authToken = this._user.getUser().JWT;
headers.append('Content-Type', 'application/json');
headers.append('Authorization', `Bearer ${authToken}`);
let options = new RequestOptions({ headers: headers });

this._http.get('http://' + url '/', options)
            .timeout(3000)
            .subscribe(
                (res) => {

Dies funktioniert jedoch, tslint beschwert sich darüber

"TS2345: Argument vom Typ '{headers: Headers;}' kann nicht dem Parameter vom Typ 'RequestOptionsArgs' zugewiesen werden. Die Eigenschaftstypen 'headers' sind nicht kompatibel. Der Typ 'Headers' kann nicht dem Typ 'Headers' zugewiesen werden. Zwei verschiedene Typen mit diesem Namen existieren, aber sie haben nichts miteinander zu tun. Die Eigenschaft 'Schlüssel' fehlt im Typ 'Kopfzeilen'. "

Ich schätze die Unterstützung.

— Zander17
quelle

Verwenden Sie const anstelle von let für Optionen und Header

— Amin

201

Aktualisieren

Ab heute @angular/httpist veraltet und @angular/common/httpsollte stattdessen verwendet werden. Der beste Weg, um mit http-Headern zu arbeiten, ist der Import import { HttpHeaders } from '@angular/common/http';( Dokumentation ).

Alte Antwort

Der HeadersTyp, den Sie importieren sollen, ist import { Headers } from '@angular/http';.

Überprüfen Sie Ihre Importe

— bviale
quelle

3

Das war's! Ich benutze Phpstorm und bin normalerweise ziemlich gut und zeigt mir deutlich, dass ich eine Abhängigkeit verpasst habe, diesmal aber nicht. Außerdem finde ich die tslint-Nachricht nicht sehr klar. Prost :)

— Zander17

3

Irgendwie gibt es eine Header-Klasse, auch wenn Sie sie nicht importieren. Sie müssen also sicherstellen, dass Sie das richtige importieren (siehe Antwort oben), damit es funktioniert.

— GoTo

3

Für Angular 5 half mir dies import { Headers, RequestOptions } from '@angular/http'; DOKUMENTATION

— Abhi

@Abhi In den Dokumenten steht, dass Header veraltet sind und wir stattdessen HttpHeaders von @ angle / common / http verwenden sollten. Aber das funktioniert nicht wirklich ... Gedanken?

— DonkeyBanana

@DonkeyBanana Ich finde THIS als gutes referrence

— Abhi

9

Sie müssen Header aktualisieren durch:

let headers =  {headers: new  HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded'})};

— Vivek Kapoor
quelle

5

Update für Angular 5

import { RequestOptions } from '@angular/http';

Ich fand dies in den Kommentaren aus der richtigen Antwort. Wenn dies jemandem hilft, viel Glück.

Dokumentation: https://angular.io/api/http/RequestOptions

— ValRob
quelle

2

Dies ist veraltet.

— Shashank Gaurav

Ja, es sieht so aus, als hätte sich das in den letzten Tagen geändert. Überprüfen Sie die Dokumentation, jetzt istimport { RequestOptions } from '@angular/http';

— ValRob

2

// Beispiel für Header vom Inhaltstyp Json

import { Http, Headers, RequestOptions } from '@angular/http';

const Url = 'http://localhost:3000/';
const headers = new Headers;
const body = JSON.stringify({
title: "data" 
});
headers.append('Content-Type', 'application/json');
this.http.post(Url, body, { headers: headers })
.pipe(map((res => res)));

— Arul Prinz
quelle