Summary: I am facing an issue in my angular program where I pass a string as a parameter from the template. Despite having the correct value in the debugger, it is being processed through the functions and eventually sent back to the server as "[object object]". I have attempted using JSON.stringify and toString(), however, even after these attempts, although they are correctly displayed in the console, they still go through the functions as "[object object]" instead of strings.
My code:
The object:
export interface Image {
id: string;
photoUrl: string;
description: string;
}
Relevant part of the component template:
<div class="col mb-5" *ngFor="let pho of currentAnimal.images">
...
<a class="btn btn-outline-dark mt-auto" (click)="DeleteImage(pho.id)" >Remove Image</a>
The function in the component class:
DeleteImage(photoId:string){
//Not sure why this is passing as an object:
this.photoService.DeletePhoto(photoId).subscribe({
error:(err)=>{console.log(err)},
complete:()=>{
let index = this.currentAnimal.images.findIndex(x=>x.id == photoId)
this.currentAnimal.images.splice(index,1);
this.toastr.success("Image has been deleted.");
}
})}
The function in my service sending it to the backend:
DeletePhoto(PhotoId:string)
{
console.log("fired with: "+{PhotoId})
return this.http.delete(this.baseUrl+'deletePhoto/'+{PhotoId});
}
The above console.log consistently shows "[object object]", which is what gets passed to the backend. Using JSON.stringify or toString() in the component function did not make any difference. The string maintains its correct value until it reaches the backend system when debugging.
Any assistance on this matter would be highly appreciated.
Thank you!