Angular2/Http（POST）ヘッダー

Question

POSTリクエスト時にヘッダーを変更できません。

単純なクラス：

export class HttpService { 
    constructor(http: Http) { 
     this._http = http; 
    } 
} 

は、私が試した：

testCall() { 
    let body = JSON.stringify(
     { "username": "test", "password": "abc123" } 
    ) 

    let headers = new Headers(); 
    headers.append('Content-Type', 'application/json'); // also tried other types to test if its working with other types, but no luck 

    this._http.post('http://mybackend.local/api/auth', body, { 
     headers: headers 
    }) 
    .subscribe(
     data => { console.log(data); }, 
     err => { console.log(err); }, 
     {} => { console.log('complete'); } 
    ); 
} 

2：2の

testCall() { 
    let body = JSON.stringify(
     { "username": "test", "password": "abc123" } 
    ) 

    let headers = new Headers(); 
    headers.append('Content-Type', 'application/json'); // also tried other types to test if its working with other types, but no luck 

    let options = new RequestOptions({ 
     headers: headers 
    }); 

    this._http.post('http://mybackend.local/api/auth', body, options) 
    .subscribe(
     data => { console.log(data); }, 
     err => { console.log(err); }, 
     {} => { console.log('complete'); } 
    ); 
} 

どれも機能していない私は物事のカップルを試してみました。私はクラスのいずれかをインポートすることを忘れなかった。

私はGoogle Chromeを使用しています。だから私は 'ネットワーク'タブをチェックし、私の要求はそこにあり、私のContent-Typeはtext/plainと言います。

これはバグですか、何か間違っていますか？

import {Headers} from 'angular2/http'; 

Answer 1

私はあなたがAngular2のHTTPサポート正しい方法を使用していると思う：

UPDATE は私がAngular2/HTTPヘッダからクラスをインポートすることを忘れていました。この作業のplunkr：https://plnkr.co/edit/Y777Dup3VnxHjrGSbsr3?p=previewを参照してください。

おそらく、Headersクラスをインポートするのを忘れた可能性があります。私はこの間違いをしばらく前にしてしまいました.JavaScriptコンソールにエラーはありませんでしたが、設定しようとしたヘッダーは実際には設定されていませんでした。例えば、Content-Typeヘッダーに関しては、私はapplication/jsonの代わりにtext/plainでした。あなたはここに

...私は輸入の Headersをコメントによってあなたに提供さplunkrでこれを再現することができ、完全な作業サンプル（輸入を含む）である：

import {Component} from 'angular2/core'; 
import {Http,Headers} from 'angular2/http'; 
import 'rxjs/Rx'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div (click)="executeHttp()"> 
     Execute HTTP 
    </div> 
    ` 
}) 
export class AppComponent { 
    constructor(private http:Http) { 

    } 

    createAuthorizationHeader(headers:Headers) { 
    headers.append('Authorization', 'Basic ' + 
     btoa('a20e6aca-ee83-44bc-8033-b41f3078c2b6:c199f9c8-0548-4be79655-7ef7d7bf9d20')); 
    } 

    executeHttp() { 
    var headers = new Headers(); 
    this.createAuthorizationHeader(headers); 
    headers.append('Content-Type', 'application/json'); 

    var content = JSON.stringify({ 
     name: 'my name' 
    }); 

    return this.http.post(
     'https://angular2.apispark.net/v1/companies/', content, { 
     headers: headers 
     }).map(res => res.json()).subscribe(
     data => { console.log(data); }, 
     err => { console.log(err); } 
    ); 
    } 
} 

が、それはあなたのお役に立てば幸い、 ティエリー