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); пользователь показывает ошибку как Аргумент типа 'HttpEvent' - не назначается параметру типа «Пользователь». В типе «HttpSentEvent» отсутствуют следующие свойства типа «Пользователь»: имя, пароль

это моя модель user.ts

export class User {
    
    token?: string;
    
}

   

Может ли кто-нибудь помочь в этом, я Я использую angular 9.

Answer 1

У вас проблема при установке HttpOptions. Это класс, имеющий свойство 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 дает ответ полностью (с кодом состояния, заголовками ответа, телом и т. Д. c.)

Я думаю, вы нарушили его, реализовав 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;
        }));

Answer 2

Я думаю, проблема может быть в возвращаемом типе вашего api. Чтобы подтвердить это, я бы порекомендовал вам зарегистрировать вывод и на основе этого сделать следующий шаг.

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

Второй вариант Я бы посоветовал вам использовать строгий тип. Создайте или используйте существующую модель пользователя при нажатии на метод публикации

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. Поскольку ошибка явно связана с проблемой преобразования.