无法处理 Angular 中的 POST HTTP 响应 html

Question

我正在尝试显示特定 activity 的详细信息。在我向后端发送 url 参数后，ngOnInit returns 中的响应正确 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，记住：“你的服务 return Observables，你订阅组件”

因此，您的服务只需 - 请参阅“return”-

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

看到你在subscribe中得到了数据，忘了“this.data=this.activitiesService....”，你得到的数据不等于this.data函数。

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

无法处理 Angular 中的 POST HTTP 响应 html

Can't handle POST http response html in Angular

http

response

typescript

angular