在TypeScript和Angular 9中，Type Headers不能赋值给类型HttpHeaders。

21 浏览
0 Comments

在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模块现在已经被@angular/common/http中的HttpClient, HttpHeaders替代。所以我能够部分解决了这个问题。

这篇帖子也很有用，作为一般知识，但它涉及到Angular 2，我找不到有用的答案。

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

0

1 答案

0 Comments

问题出现的原因是：在TypeScript和Angular 9中，HttpClient期望的参数是HttpHeaders类型，而不是Headers类型。在引入HttpClient之前，我们使用的是Headers对象，它与HttpClient不兼容。

解决方法是：使用HttpHeaders对象作为参数传递给HttpClient。例如：

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

在上述代码中，我们创建了一个HttpHeaders对象，并将其作为参数传递给HttpClient的post方法。

同时，不要忘记订阅返回的Observable对象，否则请求将不会发送出去。Observable是惰性的，需要订阅才能执行其中的逻辑。

对于返回Observable的registerUser和authenticateUser函数，我们需要使用订阅来处理它们。例如：

observable.subscribe(x => console.log(x));

如果没有对Observable进行订阅，其中的逻辑将不会执行。

此外，如果有多个Observable对象的订阅，请不要忘记取消订阅，以避免潜在的内存泄漏。

以上是关于Type Headers is not assignable to type HttpHeaders in TypeScript and Angular 9问题出现的原因以及解决方法的说明。

0