Angular2 - HTTP RequestOptions en-TÊTES

J'ai actuellement un problème avec tslint et espérais que quelqu'un pourrait me diriger dans la bonne direction.

Je suis en train d'envoyer une requête HTTP GET à l'aide de HTTP fournis par le Angular2 cadre. Avec cette requête, je dois spécifier le type de contenu et le porteur du jeton d'authentification.

Exemple de mon 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) => {

Cela fonctionne, cependant, tslint se plaint que

"TS2345: Argument de type '{ en-têtes: les en-Têtes; }' n'est pas assignable à
paramètre de type 'RequestOptionsArgs'. Types de biens "en-têtes"
sont incompatibles. De Type "en-Têtes" n'est pas cessible de type "en-Têtes".
Deux types différents avec ce nom existe, mais ils ne sont pas liés.
La propriété 'clés' est absente du type "en-Têtes"."

J'apprécie le soutien.

  • envisager l'utilisation de const au lieu de les laisser pour les deux options, et les en-têtes
InformationsquelleAutor Zander17 | 2017-04-04
  1. 201

    Mise à jour

    À compter d'aujourd'hui, @angular/http a été obsolète, et @angular/common/http devrait être utilisé à la place. Donc, la meilleure façon de travailler avec les en-têtes http importation import { HttpHeaders } from '@angular/common/http'; (la documentation).

    Vieille réponse

    La Headers type que vous êtes censé importer est import { Headers } from '@angular/http';.

    Vérifier vos importations

    • Qui était-il! Je suis l'aide de Phpstorm et est généralement très bonne et en montrant clairement de moi que j'ai raté une dépendance, mais n'a pas, cette fois. En outre, je ne trouve pas la tslint message très clair. Cheers 🙂
    • D'une certaine manière, il est un des en-Têtes de classe, même si vous n'avez pas l'importer. Ainsi, vous devez vous assurer que vous importez celui de droite (voir réponse ci-dessus) pour qu'il fonctionne.
    • Angulaire 5, cela m'a aidé import { Headers, RequestOptions } from '@angular/http'; DOCUMENTATION
    • Il est dit dans les docs que en-Têtes est obsolète, et nous devrions utiliser HttpHeaders de @angulaire/common/http à la place. Mais ça ne marche pas vraiment... les Pensées?
    • J'ai trouver CECI comme un bon referrence
    • @angular/common/http"' has no exported member 'Http'. chaque article explique les différentes
    • /@angular/common/http"' has no exported member 'Headers'. wtf

    InformationsquelleAutor bviale
  2. 8

    Vous devez mettre à jour les en-têtes par:

    let headers =  {headers: new  HttpHeaders({ 'Content-Type': 'application/x-www-form-urlencoded'})};
    InformationsquelleAutor Vivek Kapoor
  3. 5

    Mise à jour Angulaire 5

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

    J'ai trouvé ça dans les commentaires de la bonne réponse, donc Si cela aide quelqu'un, bonne chance.

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

    • Elle est obsolète.
    • Ouais, on dirait qu'il a eu changement dans les derniers jours. vérifiez la documentation, c'est maintenant import { RequestOptions } from '@angular/http';
    InformationsquelleAutor ValRob
  4. 2

    //exemple d'en-têtes de type de contenu 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)));
    InformationsquelleAutor arul prince