I have a form and when i click the submit button onSubmit() function is called and here i have printed in console all the datas that are needed to be passed through ponent class like this:

onSubmit() {
    this.submitted = true;
    console.log("entered in submiteed");
    console.log(this.selectedTable);
    console.log(this.documents);
    console.log(this.empList);

    this.letter.inOut="AnnexOne";
    this.letter.letterFile=null;
    this.letter.representativeName=null;
    this.letter.assessmentNo=0;
    this.letter.letterIssuedSubBy=null;
    console.log(this.letter);
      this.letterService.saveThree(this.selectedTable,this.documents,this.empList).subscribe(data => console.log(data), error => console.log(error));
  }

The JSON data that is printed in console is like:

I tried to send the three parameters from here saveThree(this.selectedTable,this.documents,this.empList)

and send it to service class,so i need to perform post operation so i tried :

export class LetterService {

  private baseUrl = 'http://localhost:8080/api/letter';
   private letter = new Letter();

  constructor(private http: HttpClient) { }


 saveThree(selectedTable: any,documents: any,empList: any): Observable<Object> {
    return this.http.post(`${this.baseUrl}` + `/create`, selectedTable,documents,empList);
  }

} 

In this class also i have used three parameters to receive but the error is :

I need to pass these three parameters from service class to backend but Why it is me showing me such mismatch error though there are equal number of parameters?

I have a form and when i click the submit button onSubmit() function is called and here i have printed in console all the datas that are needed to be passed through ponent class like this:

onSubmit() {
    this.submitted = true;
    console.log("entered in submiteed");
    console.log(this.selectedTable);
    console.log(this.documents);
    console.log(this.empList);

    this.letter.inOut="AnnexOne";
    this.letter.letterFile=null;
    this.letter.representativeName=null;
    this.letter.assessmentNo=0;
    this.letter.letterIssuedSubBy=null;
    console.log(this.letter);
      this.letterService.saveThree(this.selectedTable,this.documents,this.empList).subscribe(data => console.log(data), error => console.log(error));
  }

The JSON data that is printed in console is like:

I tried to send the three parameters from here saveThree(this.selectedTable,this.documents,this.empList)

and send it to service class,so i need to perform post operation so i tried :

export class LetterService {

  private baseUrl = 'http://localhost:8080/api/letter';
   private letter = new Letter();

  constructor(private http: HttpClient) { }


 saveThree(selectedTable: any,documents: any,empList: any): Observable<Object> {
    return this.http.post(`${this.baseUrl}` + `/create`, selectedTable,documents,empList);
  }

} 

In this class also i have used three parameters to receive but the error is :

I need to pass these three parameters from service class to backend but Why it is me showing me such mismatch error though there are equal number of parameters?

• javascript
• angular
• typescript
• angular6

• Read the API documentation. It should clarify this issue – fredrik Commented Nov 15, 2018 at 10:23

3 Answers 3

Because POST request has three parameters(first is URL,second is DATA that you need to pass and third is optional which is header information).If you want to pass more than one data then you need to like below.

return this.http.post(`${this.baseUrl}` + `/create`, {selectedTable,documents,empList})}

because post request takes 3 parameters(URL, DATA object that you need to send, and HttpOptions object if you need to send additional options), you are sending here selectedTable as Data object, documents as HttpOptions object, and empList just as 4th argument, to solve this just add that 3 objects in one and send as one object (as second parameter DATA)

  export class LetterService {

      private baseUrl = 'http://localhost:8080/api/letter';
       private letter = new Letter();

      constructor(private http: HttpClient) { }


     saveThree(selectedTable: any,documents: any,empList: any): Observable<Object> {
        return this.http.post(`${this.baseUrl}` + `/create`, {selectedTable: selectedTable,documents: documents, empList: empList});
      }

    }

Http POST takes resource URL as a parameter and additional two paramters

1. the Data to POST in the body of the request
2. the method HttpOptions (if any)

For example :

addHero (hero: Hero): Observable<Hero> {
  return this.http.post<Hero>(this.heroesUrl, hero, httpOptions)
    .pipe(
      catchError(this.handleError('addHero', hero))
    );
}

in your .ts

saveThree(selectedTable: any,documents: any,empList: any): Observable<Object> {
    let _data = { 
       "selectedTable" : selectedTable,
       "documents" : documents,
       "empList"  : empList 
    }
    return this.http.post(`${this.baseUrl}` + `/create`, _data );
  }