Angular 4 RequestOption对象不可分配给post方法

Question

我在使用这些代码时遇到麻烦，我在以下代码块中创建了标题

headers.append("Authorization",btoa(username+":"+password));

var requestOptions = new RequestOptions({headers:headers});

但是如果我尝试在post方法中使用它

return this.http.post(url,JSON.stringify({username,password}),requestOptions)
    .map(res=>res.json())
    .map(res=>{
      if(res){
        localStorage.setItem("isLogged",res);
        this.loggedIn =true;
      }
      return res;
    });

我收到此错误消息

Typescript Error
Argument of type 'RequestOptions' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: Ht...'. Types of property 'headers' are incompatible. Type 'Headers' is not assignable to type 'HttpHeaders | { [header: string]: string | string[]; }'. Type 'Headers' is not assignable to type '{ [header: string]: string | string[]; }'. Index signature is missing in type 'Headers'.

我尝试将Header（）更改为HttpHeader（），但没有帮助。问题是什么？

更新

我删除了requestOptions对象，然后从HttpHeaders（）创建了标头

let headers = new HttpHeaders();

并在post方法中使用该标头值

return this.http.post(url,JSON.stringify({username,password}), { options: { headers: headers; } })
    .map(res=>res.json())
    .map(res=>{
      if(res){
        localStorage.setItem("isLogged",res);
        this.loggedIn =true;
      }
      return res;
    });

然后得到这个错误

[ts]
Argument of type '{ options: { headers: HttpHeaders; }; }' is not assignable to parameter of type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: Ht...'.
  Object literal may only specify known properties, and 'options' does not exist in type '{ headers?: HttpHeaders | { [header: string]: string | string[]; }; observe?: "body"; params?: Ht...'.

我也试过了

return this.http.post(url,JSON.stringify({username,password}), { headers: headers })
    .map(res=>res.json())
    .map(res=>{
      if(res){
        localStorage.setItem("isLogged",res);
        this.loggedIn =true;
      }
      return res;
    });

然后我在第一个“ .map”上遇到了错误

[ts] Property 'map' does not exist on type 'Observable<Object>'.

Answer 1

@ angular / http已弃用

使用@ angular / common / http代替

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

const httpOptions = {
     headers: new HttpHeaders({
     'Content-Type':  'application/json',
     'Authorization': 'my-auth-token'
    })
};


addHero (hero: Hero): Observable<Hero> {
     return this.http.post<Hero>(this.heroesUrl, hero, httpOptions)
     .pipe(
      catchError(this.handleError('addHero', hero))
    );
}

Answer 2

该类将与已弃用的HttpRequestOptions模块一起使用，并且由于您收到此错误，我假设您正在使用HttpClient模块。

如果您想按照代码中所示headers进行设置，您可以使用类似的内容（Angular文档中显示的简化版本）：options

request(url, { body }, { options: { headers?: HttpHeaders; } })

但是，您也可以headers直接设置，而不使用选项。那看起来像这样：

    request(url, { body }, { headers?: HttpHeaders; } )