网站搜索

在 TypeScript 和 Angular 9 中,Type Headers 不能分配给类型 HttpHeaders


我刚接触TypeScript,正在学习做一个简单的认证教程。后端我使用Express,前端我使用Angular 9。我查了很多关于这个错误的资料,网上有很多好的资源,但我还是不明白为什么没有一个适用于我的情况。

我收到以下错误:

错误:src/app/services/auth.service.ts:19:79 - 错误 TS2769: 没有重载匹配此调用。最后一个重载给出了以下错误。类型 'Headers' 不能分配给类型 'HttpHeaders | { [header: string]: string | string[]; } | undefined'。类型 'Headers' 不能分配给类型 '{ [header: string]: string | string[]; }'。类型 'Headers' 缺少索引签名。

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));

下面是导致问题的代码:

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));
  }
}

我发现这篇帖子可以帮助我解决问题,但没有成功,因为我使用的是 Angular 9,而 http 模块现在被 HttpClient, HttpHeaders 从 '@angular/common/http'; 取代了。所以我能够跟随并部分解决了它。

这作为一般知识也很有用,但它涉及 Angular 2,没有找到有用的答案。

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

答案#1

HttpClient 期望以 HttpHeaders 作为参数。(在引入 HttpClient 之前使用的是 Headers 对象,它与 HttpClient 不兼容。)例如,下面的代码可能会工作:

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

在此查看更多细节和示例:https://angular.io/guide/http#adding-headers

别忘了订阅返回的Observable,否则请求不会被发送。(Observable是惰性的。)