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

Question

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

我收到以下错误：

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

19 返回 this.httpCient.post('http://localhost:3000/users/register', 用户, {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));
  }
}

我找到了this post 来帮助我解决问题，但是没有用，因为我使用的是Angular 9，而http 模块现在被'@angular/common/http'; 中的HttpClient, HttpHeaders 替换。所以我能够跟随并部分解决它。

This 作为一般知识也很有用，但它处理 Angular 2 并且找不到有用的答案。

如果有人遇到同样的错误，请分享解决方法。

Answer 1

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

在此处查看更多详细信息和示例： https://angular.io/guide/http#adding-headers

不要忘记订阅返回的Observable，否则请求将不会发送。 （Observables 是惰性的。）