When attempting to use this.useraccountsubject(user) to insert information upon login, I encountered an error:

ErrorType: this.useraccount.next(user) then Error An argument of type 'HttpResponse' is not allowed against a balance of 'Useraccount'

Here is the code snippet from auth service.ts:

export class AuthService {
  
  private useraccountSubject: BehaviorSubject<Useraccount> =
  new BehaviorSubject<Useraccount>(new Useraccount("", "", "", "", ""));
  public user: Observable<Useraccount> = 
   this.useraccountSubject.asObservable();
   isLoggedIn = new BehaviorSubject(false);

   constructor(private http:HttpClient, private router:Router){
      this.useraccountSubject = 
            new BehaviorSubject<Useraccount>(null as any);

      this.user = this.useraccountSubject.asObservable();

      if(sessionStorage.getItem("USER")){ 

        const user =sessionStorage.getItem("USER");

      if(user){
        this.useraccountSubject.next(JSON.parse(user));
      }

     }

   }

   private handleError(err: HttpErrorResponse) {

     if (err.status === 200) {
        console.error('Error:',err.error.data)
     } else {
        console.error(`Backend error ${err.status}`)
     }

     return throwError(err);
   }

   private handleErrorsingup(err: HttpErrorResponse) {
     if (err.status === 201) {
       console.error('Error:',err.error.data)
     } else {
       alert('faild');
       console.error(`Backend error ${err.status}`)
     }

     return throwError(err);
   }

   login(username:string,password:string){ 
      const params = new FormData();
      params.append('username', username);
      params.append('password', password);

      return this.http.post<any>(`${baseUrl}/signin/`, params, { observe:'body', withCredentials: true})
    .pipe(map(user=>{
     
      catchError(this.handleError)

      //edit !!
      this.useraccountSubject.next(user);
      sessionStorage.setItem("USER", JSON.stringify(user));

      this.isLoggedIn.next(true);

      return user;
    }));
   }
     
   signup(email:string,password:string,name:string ){
     const params = new FormData();
     params.append('email', email);
     params.append('password', password);
     params.append('name', name);

    return this.http.post<any>(`${baseUrl}/signup/`, params, { observe:'body', withCredentials: true })
    .pipe(
      catchError(this.handleErrorsingup)
     );
   }
    

   logout(){
      return this.http.post<any>(`${baseUrl}/signout/`, {})
       .subscribe(response => {
          this.isLoggedIn.next(false);
          this.useraccountSubject.next(null as any)
          sessionStorage.clear();

          this.router.navigate(['login']) 
      })
   }

 //edit
 setUseraccount(user: Useraccount): void {
    this.useraccountSubject.next(user);
 }

 getUseraccount(): Observable<Useraccount> {
    return this.useraccountSubject;
 }
}

The 'HttpResponse' format does not match the attributes of id, username, name, password, and email in the 'Useraccount' format.

Here is the code snippet from Useraccount.ts:

export class Useraccount{
  constructor(
    public id:string,
    public username: string,
    public name: string,
    public password: string,
    public email: string
){}
}

It appears that the format for Useraccount.ts is available.

Additionally, here is the code snippet from header.ts:

export class HeaderComponent implements OnInit {
   private userSubject: BehaviorSubject<Useraccount> = new   
 BehaviorSubject<Useraccount>(new Useraccount("", "", "", "", ""));


   user:Observable<Useraccount> = this.userSubject.asObservable();

  loginStatus?: boolean;
  constructor(private authservice:AuthService) {



}

  ngOnInit(): void {

   this.authservice.getUseraccount().subscribe(res => {
  if (res === null) {

     // handler error

     console.log(this.user);
  } else {
   
    let useraccountSubject: Useraccount = new Useraccount(res.id, res.username, res.email, res.password, res.name);

     this.userSubject.next(useraccountSubject);
  }
});

   this.authservice.isLoggedIn.subscribe((status:any) => {
   this.loginStatus = status;
   });
 }
 logout($event: any){
$event.stopPropagation();
this.authservice.logout();
}
}

Here is the code snippet from header.html:

   <ul class="info_ul" *ngIf="!loginStatus" >
      <li><a  routerLink='/login' >login</a></li>
      <li><a routerLink='/singup' >signup</a></li>
  </ul>
  <ul class="info_ul" *ngIf="loginStatus">
    <div *ngIf="user | async"> //edit
     <li>{{( user | async).username }}</li> //username . string error
    </div>
    <li><a (click)="logout($event)">logout</a></li>
</ul>

Lastly, in the console:

user: {id: 7, uuid: '11a25078-be87-4a53-9ff7-ead8777f79be', username: 
'<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a7c5c5e7d3c2d4d389ccd5">[email protected]</a>', email: '<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8be9e9cbffeef8ffa5e0f9">[email protected]</a>', name: 'beom', …}
[[Prototype]]: Object

The error has been resolved, but the username is not being displayed in the header. Can you please assist with resolving this issue?