预期 2 arguments，但得到 1.ts(2554)

Question

Good morning friends, sorry for the inconvenience I am doing practices to learn and I was doing a login, but the problem is that I am trying to connect it to an api and it does not make the connection, it gives me a super strange error in the login component Here I attach the login.component

import { Component, } from '@angular/core';
import { AppserviceService } from '../../services/appservice.service';
import { NgForm } from '@angular/forms';
import { AppsResp } from '../../interfaces/interfaces';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
})
export class LoginComponent {

  email:string ='';
  password:string='';

  constructor(public AppserviceService: AppserviceService) { }

  login() {
    const user = {email: this.email, password: this.password};
    this.AppserviceService.login(user).subscribe( data => {
      console.log(data);
    });
  }
}

the error that fits is the following_ "Expected 2 arguments, but got 1.ts(2554) appservice.service.ts(15, 26): An argument for 'password' was not provided."

Here I attach the app services service, which is where the origin of the error marks me

import { HttpClient } from '@angular/common/http';
import { Injectable, Query } from '@angular/core';
import { Observable } from 'rxjs';
import { AppsResp, Registro } from '../interfaces/interfaces';

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

  constructor(private http: HttpClient) { }



  login ( email: string, password: string ){
const body = {email,password}
return this.http.post <AppsResp>("http://apitest.e-bango.com/api/auth/login" , body );
  }

  }

Likewise, I can't find the correct logic to insert the registry component in my service, can you help me? and explain in as much detail as possible what I'm doing wrong? Thank you

Answer 1

I think you have 2 ways to resolve this problem

1: Your input to function login is not correct

 login() {
    const user = {email: this.email, password: this.password};
    this.AppserviceService.login(user).subscribe( data => {
      console.log(data);
    });
  }

Change to

 login() {
    this.AppserviceService.login(email: this.email, password: this.password).subscribe( data => {
      console.log(data);
    });
  }

2: Change the function login

  login ( email: string, password: string ){
const body = {email,password}
return this.http.post <AppsResp>("http://apitest.e-bango.com/api/auth/login" , body );
  }

to

  login ( {email: string, password: string }){
const body = {email,password}
return this.http.post <AppsResp>("http://apitest.e-bango.com/api/auth/login" , body );
  }

Answer 2

just change login method in appserviceService

 login ( body ){ return this.http.post <AppsResp>("http://apitest.e-bango.com/api/auth/login" , body ); }

Answer 3

its because your .login from AppserviceService is accepts or excepts 2 arguments, this is email and password. But you gonna put there user object

try this

export class LoginComponent {
  email:string ='';
  password:string='';

  constructor(public AppserviceService: AppserviceService) { }

  login() {
    this.AppserviceService.login(this.email, this.password).subscribe( data => {
      console.log(data);
    });
  }
}

Answer 4

Please check destructuring in the docs

login ({email, password}){
  ...
}

You can also give values by defect

login ({email="",password=""}){
  ...
}

And you can indicate the type

login(({email="",password=""}:{email?:string,password?:string}){
  ...
}

If you use "optional parameters" use ? to indicate is optional

BTW: you can pass the user itself

login(user:{email?:string,password?:string}){
  return this.http.post(...,user);
}