Angular | The argument of type 'HttpResponse<Object>' cannot be assigned to the para-CodePudding

I'm trying to apply the same guidelines as in the 'Tour of Heroes' tutorial, but in this case I need to make an http.post method with an external api call. In my component, I would like to add a new element to the array, but I'm getting these errors:

The argument of type 'HttpResponse' cannot be assigned to the parameter of type 'User'.
The following properties of the type 'User' are missing in the type
'HttpResponse': id, name, email, gender.

 add(name: string, gender: string, email: string, status: string): void {
    name = name.trim();
    gender = gender.trim();
    email = email.trim();
    status = status.trim();
    this.userService.APIkey = this.urlVal as string
      this.userService.addUser(email, name, gender, status).subscribe(data 
     => this.users.push(data)) //...push(data) HERE there are errors.
      }

user.service.ts

   /** POST: add a new user to the server */
  addUser(email: string, name: string, gender: string, status: string){
    const addUserUrl = `${this.url}?access-token=${this.APIkey}`;
    return this.http.post(addUserUrl,{
      email: email, 
      name: name, 
      gender: gender, 
      status: status, 
      returnSecureToken: true},
      {observe: 'response'});
}

user.ts

export interface User {
  id: number;
  name: string;
  email: string;
  gender: string;
  status: string;
}

Can anyone help me figure out what I'm doing wrong?

CodePudding user response：

{observe: 'response'} causes Observable to be returned as HttpResponse. In your case, you just need Observable<User>.

Try this:

 addUser(email: string, name: string, gender: string, status: string){
            const addUserUrl = `${this.url}?access-token=${this.APIkey}`;
            return this.http.post<User>(addUserUrl,{
              email: email, 
              name: name, 
              gender: gender, 
              status: status
           });
        }