类型标头不可分配给 TypeScript 和 Angular 9 中的 HttpHeaders 类型

Eso*_*ars 2 typescript postman angular

我是新手TypeScript,正在学习做一个简单的身份验证教程。对于我正在使用的后端Express,以及我正在使用的前端Angular 9。我对这个错误进行了很多研究,因为网上有很好的资源,但我不明白为什么没有一个适用于我的案例。

我收到以下错误:

错误:src/app/services/auth.service.ts:19:79 - 错误 TS2769:没有重载与此调用匹配。最后一次超载出现以下错误。类型“Headers”不可分配给类型“HttpHeaders |” { [标头:字符串]:字符串 | 细绳[]; } | 不明确的'。类型“Headers”不可分配给类型“{ [header: string]: string | 细绳[]; }'。“标头”类型中缺少索引签名。

19 return this.httpCient.post('http://localhost:3000/users/register', user, {headers: headers}).pipe(map(res => res));

因此,在这两个函数上registerUser(user)authenticate(user)错误似乎都在这一行:

return this.httpCient.post('http://localhost:3000/users/authenticate', user, {headers: headers}).pipe(map(res => res));
Run Code Online (Sandbox Code Playgroud)

下面是导致问题的代码:

import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  authToken: any;
  user: any;

  constructor(private httpClient: HttpClient) { }


  registerUser(user) {
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    return this.httpClient.post('http://localhost:3000/users/register', user, {headers: headers}).pipe(map(res => res));
  }

  authenticateUser(user) {
    let headers = new Headers();
    headers.append('Content-Type', 'application/json');
    return this.httpClient.post('http://localhost:3000/users/authenticate', user, {headers: headers}).pipe(map(res => res));
  }
}
Run Code Online (Sandbox Code Playgroud)

我发现这篇文章可以帮助我解决问题,但没有用,因为我正在使用,Angular 9并且该http模块现在已替换为HttpClient, HttpHeadersfrom '@angular/common/http';。所以我能够遵循并部分解决它。

作为常识,Angular 2也很有用,但它涉及但无法找到有用的答案。

如果有人遇到同样的错误,请分享如何解决它。

Mil*_*enk 5

期望作为HttpClient参数HttpHeaders。(Headers对象在引入之前使用HttpClient,并且与 不兼容HttpClient。)因此,例如以下可以工作:

const httpOptions = {
  headers: new HttpHeaders({
    'Content-Type':  'application/json'
});
return this.httpClient.post('http://localhost:3000/users/authenticate', user, httpOptions);
Run Code Online (Sandbox Code Playgroud)

请参阅此处的更多详细信息和示例: https ://angular.io/guide/http#adding-headers

不要忘记订阅返回的Observable内容,否则请求将不会被发送。(可观察者是懒惰的。)