Angular 类型 'HttpEvent<any>' 的参数不可分配给参数

Question

在我的身份验证服务中，

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

import { environment } from 'src/environments/environment';
import { User } from '../_models';

@Injectable({ providedIn: 'root' })
export class AuthenticationService {
    private currentUserSubject: BehaviorSubject<User>;
    private payload:any;
    public header:any;
    public currentUser: Observable<User>;
    
 

    constructor(private http: HttpClient) {
        this.currentUserSubject = new BehaviorSubject<User>(JSON.parse(localStorage.getItem('currentUser')));
        this.currentUser = this.currentUserSubject.asObservable();
this.header= new HttpHeaders()
        .set('Access-Control-Allow-Origin', '*')
        .set("Access-Control-Allow-Headers", "Origin, X-Requested-With")
        .set('Accept', 'application/json')
          .set('content-type', 'application/json'); 
        
    }
    
    public get currentUserValue(): User {
        return this.currentUserSubject.value;
    }
    login(name: string, password: string) {
        this.payload={ "auth": {
            "identity": {
              "methods": ["password"],
              "password": {
                "user": {
                  "name": name,
                  
                  "password": password
                }
              }
            },
            
          }
        }
        
        this.header={'Content-Type': 'application/json'}
       
      return this.http.post<any>(`${environment.apiUrl}auth/tokens`,this.payload,{headers: this.header,observe: 'response' })
            .pipe(map(response  => {
              const user = response.body;
              const token = response.headers.get('x-subject-token');
              localStorage.setItem('token', token);
                // store user details and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('currentUser', JSON.stringify(user));
                this.currentUserSubject.next(user);
                console.log(response.headers.get('x-subject-token'));
                //console.log(token);
                return user;
            }));
    }
    logout() {
        // remove user from local storage to log user out
        localStorage.removeItem('currentUser');
        this.currentUserSubject.next(null);
    }
}

在 this.currentUserSubject.next(user) 中； 用户显示错误为 Argument of type 'HttpEvent' is not assignable to parameter类型 'User'。类型 'HttpSentEvent' 缺少类型 'User' 的以下属性：名称、密码

这是我的模型user.ts

export class User {
    
    token?: string;
    
}

任何人都可以帮忙吗，我正在使用 angular 9.

Answer 1

我认为问题可能与您 api 的 return 类型有关。为确认这一点，我建议您记录输出并基于此执行下一步。

 return this.http.post<any>(environment.apiUrl+"auth/tokens",this.payload,this.header)
            .pipe(map(user => {
               console.log(user);
                // store user details and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('currentUser', JSON.stringify(user));
                this.currentUserSubject.next(user);
                return user;
            }));

第二个选项我建议你使用强类型。在点击 post 方法时创建或使用现有的 User 模型

return this.http.post<User>(environment.apiUrl+"auth/tokens",this.payload,this.header)
            .pipe(map(user => {
               console.log(user);
                // store user details and jwt token in local storage to keep user logged in between page refreshes
                localStorage.setItem('currentUser', JSON.stringify(user));
                this.currentUserSubject.next(user);
                return user;
            }));

在这两种情况下，我怀疑是 API 的回应。因为错误显然存在转换问题。

Answer 2

设置 HttpOptions 时遇到问题。它是一个 class，它有一个属性作为 HttpHeaders。但是你执行错了。

你需要改变

this.http.post(...., this.payload, this.header)

至

const httpHeaders = new HttpHeaders().set('Content-Type', 'application/json');
this.http.post(...., this.payload, {headers: httpHeaders})

为什么会出现此错误？

HttpOptions 还有一个属性即 observe。它的默认值为 body，但您可以将其设置为 response。当您将其设置为 response 时，Angular 完全给出响应（带有状态代码、响应 headers、body 等）

我认为你因实施 HttpOptions 错误而破坏了它。

更新

如果您想达到 response headers，您需要将 observe: 'response' 添加到 HttpOptions 喜欢

 const httpHeaders = new HttpHeaders().set('Content-Type', 'application/json');
this.http.post(...., this.payload, { headers: httpHeaders, observe: 'response' }).pipe(map(response => {
            const user = response.body;
            const token = response.headers.get('X-Subject-Token');
            // store user details and jwt token in local storage to keep user logged in between page refreshes
            localStorage.setItem('token', token);
            localStorage.setItem('currentUser', JSON.stringify(user));
            this.currentUserSubject.next(user);
            return user;
        }));

Angular 类型 'HttpEvent<any>' 的参数不可分配给参数

Angular argument of type 'HttpEvent<any>' is not assignable to parameter

rest

http

httpclient

angular