Can't handle POST http response html in Angular

Question

I'm trying to show the details of a specific activity. The response in the ngOnInit returns a JSON file correctly after I send a url parameter to the backend.

activity-details.page.ts

ngOnInit() {
//console.log(this.router.snapshot.params.id);
let data = this.activitiesService.getDetails(this.router.snapshot.params)
console.log(this.router.snapshot.params); } 

This is the service I'm using to communicate with backend. The console.log is showing the response correctly.

activities.service.ts

activities: Activity;
    
getDetails (data) {
    this.http.post<Activity>(environment.getBaseAddress() + 'activities/getDetails', data, this.httpOptions2).subscribe((data:any) =>  {
      console.log(data.name);
      console.log(data.type_of_activity);
    });

The issue is that it's not showing the name in the template. The console says that the name is undefined.

activity-details.page.html

<div *ngFor='let activity of activities?.activities'>
<p>Activity name {{ activity.name }} </p>
</div>

What am I doing wrong?

Answer 1

Alexander, remember: "your services return Observables, you subscribe in components"

So, your service simply -see the "return"-

getDetails (data):Observable<any>{
  return this.http.post<Activity>(environment.getBaseAddress() + 'activities/getDetails',
          data, this.httpOptions2)
}

Your component

ngOnInit() {
  this.activitiesService.getDetails(this.router.snapshot.params).subscribe((res:any)=>{
     console.log(res)
     this.data=res;
  })
} 

See that you get the data in subscribe, forget "this.data=this.activitiesService....", you don't get the data equal this.data to the functon.

NOTE: I don't check if your call to the API is ok. e.g. in .NET in a POST in general you pass and object and your're passing a string, perhafs you need call to this.http.post(environment.getBaseAddress() + 'activities/getDetails/'+data,null), etc.