无法在 Angular 中处理 POST http 响应 html

Question

我正在尝试显示特定活动的详细信息。在我将url参数发送到后端后，ngOnInit中的响应正确返回了一个JSON文件。

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); } 

这是我用来与后端通信的服务。 console.log 正确显示响应。

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);
    });

问题是它没有在模板中显示名称。 控制台说名称未定义。

activity-details.page.html

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

我做错了什么？

Answer 1

Alexander，记住：“你的服务返回 Observables，你订阅了组件”

所以，你的服务很简单——看“回报”——

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

你的组件

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

看到你在订阅中得到数据，忘记“this.data=this.activitiesService....”，你没有得到等于 this.data 的数据。

注意：我不检查您对 API 的调用是否正常。例如在 .NET 中，通常在 POST 中传递对象，并且传递字符串，可能需要调用 this.http.post(environment.getBaseAddress() + 'activities/getDetails/'+data,null) 等。