I am facing a challenge in my Angular project. I have a form on one of my pages that allows users to submit data which is then sent to the database. However, after submitting the data, I need to delete the user's information from one table and insert it into another table. The issue arises because both actions occur simultaneously due to being triggered by the same button click event. How can I ensure that the delete function waits until the insert function is completed before executing?
Below is the button responsible for submission and deletion:
<button ion-button full block color="danger"(click)="postDados(form.controls.itemRows);postNeurosensi(formsensi.controls.itemRows3);postEletroneuro(form2.controls.itemRows2);deletaDados()">Enviar</button>The following are the functions defined in Page.TS file:
postEletroneuro(req){
this.service.postEletroneuro(req.value)
.subscribe(
data => console.log(data.message),
err => console.log(err)
);
}
deletaDados(){
this.service.deleteData(this.parametroid).subscribe(
data => {
console.log(data.message);
this.getDados();
},
err => console.log(err)
);
}
Now, let's take a look at the service.ts file containing the functions:
postEletroneuro(params){
let headers = new Headers();
headers.append('Content-type','application/json');
return this.http.post(`${this.api}eletroneuro/`, params,{
headers: headers
}).map(
(res:Response) => {return res.json();}
);
}
deleteData(id){
console.log(`${this.api}${id}`)
let headers = new Headers();
headers.append('Content-type', 'application/json');
return this.http.post(`${this.api}fichasdia/${id}/`, id,{
headers: headers
}).map(
(res: Response) => {return res.json();}
);
}
Any suggestions on how to handle this situation?