Angular 12 - Error : No overload matches this call. Overload 1 of 5 Angular 12 - 错误：没有重载匹配此调用。过载 1 of 5 有大用

Question

以下是我的代码：

import { Injectable } from '@angular/core';
import { Router } from '@angular/router';
import { BehaviorSubject } from 'rxjs';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  isAuth$ = new BehaviorSubject<boolean>(false);
  token!: string ; 
  userId!: string;

  constructor(private router: Router,
    private http: HttpClient) { }


  createNewUser(email: string, password: string) {
    return new Promise<void>((resolve, reject) => {
      this.http.post(
        'http://localhost:3000/api/auth/signup',
        { email: email, password: password })
        .subscribe(
          () => {
            this.login(email, password).then(
              () => {
                resolve();
              }
            ).catch(
              (error) => {
                reject(error);
              }
            );
          },
          (error) => {
            reject(error);
          }
        );
    });
  }

  login(email: string, password: string) {
    return new Promise<void>((resolve, reject) => {
      this.http.post(
        'http://localhost:3000/api/auth/login',
        { email: email, password: password })
        .subscribe(
          (authData: { token: string, userId: string }) => {  //====> Error 
            this.token = authData.token;
            this.userId = authData.userId;
            this.isAuth$.next(true);
            resolve();
          },
          (error) => {
            reject(error);
          }
        );
    });
  }

  logout() {
    this.isAuth$.next(false);
    this.userId = null!;
    this.token = null!;
  }
}

错误描述：

没有重载匹配此调用。重载 1 of 5, '(next: null, error: (error: any) => void, complete?: () => void): Subscription'，给出以下错误。'(authData: { token: string; userId: string;}) => void' 类型的参数不可分配给'null' 类型的参数。
重载 2 of 5, '(next?: (value: Object) => void, error?: (error: any) => void, complete?: () => void): Subscription'，给出以下错误。'(authData: { token: string; userId: string;}) => void' 类型的参数不可分配给'(value: Object) => void' 类型的参数。参数“authData”和“value”的类型不兼容。“对象”类型可分配给极少数其他类型。您的意思是改用“任何”类型吗？类型“对象”缺少类型“{ token: string; 中的以下属性；用户ID：字符串；}'：令牌，用户ID

以下是我的代码

错误描述

Yong Shun · Accepted Answer · 2021-09-09 10:51:59Z

您必须指定预期接收的响应数据类型this.http.post。

解决方案 1：指定为{ token: string, userId: string }类型

login(email: string, password: string) {
    return new Promise<void>((resolve, reject) => {
      this.http.post<{ token: string, userId: string }>(
        'http://localhost:3000/api/auth/login',
        { email: email, password: password })
        .subscribe(
          (authData: { token: string, userId: string }) => { 
            this.token = authData.token;
            this.userId = authData.userId;
            this.isAuth$.next(true);
            resolve();
          },
          (error) => {
            reject(error);
          }
        );
    });
  }

解决方案 2：指定为any类型

login(email: string, password: string) {
    return new Promise<void>((resolve, reject) => {
      this.http.post<any>(
        'http://localhost:3000/api/auth/login',
        { email: email, password: password })
        .subscribe(
          (authData: { token: string, userId: string }) => { 
            this.token = authData.token;
            this.userId = authData.userId;
            this.isAuth$.next(true);
            resolve();
          },
          (error) => {
            reject(error);
          }
        );
    });
  }

阿米尔 · Answer 2 · 2021-09-09 12:33:26Z

this.http.post您可以将函数的泛型类型更改为{ token: string, userId: string }如下所示：

this.http.post<{ token: string, userId: string }>(......);

但是，我认为在您的情况下，在您的函数中Observable直接使用没有订阅和订阅会更好。promise

您可以通过以下方式实现：

  login(email: string, password: string): Observable<void> {
    return this.http
      .post<{ token: string; userId: string }>(
        "http://localhost:3000/api/auth/login",
        {
          email: email,
          password: password,
        }
      )
      .pipe(
        map((authData) => {
          this.token = authData.token;
          this.userId = authData.userId;
          this.isAuth$.next(true);
        })
      );
  }

You are here

Angular 12 - Error : No overload matches this call. Overload 1 of 5 Angular 12 - 错误：没有重载匹配此调用。过载 1 of 5 有大用

2 个答案正确答案

你的答案

友情链接

搜索表单

用户登录

You are here

Angular 12 - Error : No overload matches this call. Overload 1 of 5 Angular 12 - 错误：没有重载匹配此调用。过载 1 of 5 有大用

2 个答案 正确答案

你的答案

友情链接

2 个答案正确答案