时间戳

首页 > 解决方案 > JSON 属性未定义即使包含数据的变量填充了 JSON 对象

javascript - JSON 属性未定义即使包含数据的变量填充了 JSON 对象

问题描述

我正在尝试通过获取请求从我的数据库中接收 MongoDB 文档。我已经通过 Postman 测试了 URL，并按预期返回了文档。这让我意识到问题出在前端而不是服务器。当我通过前端执行相同操作时，它会检索数据，并存储在变量res中并分配给this.englishteam，因此可以在 GetSingleEnglishTeam 的函数范围之外访问它。

public teamenglish!:EnglishTeam;

GetSingleEnglishTeam(_id: string) {
    this.englishTeamService.GetSingleEnglishTeam(_id).subscribe((res)=>{
      console.log("The team: "+ res);
      this.teamenglish = res;
      //  console.log(this.teamenglish);

    })
  }

但是，当我尝试访问存储在teamenglish中的ClubName时，我收到一个未定义的错误

错误类型错误：无法读取 ClubHonoursComponent_Template (club-honours.component.html:9) 处未定义的属性“ClubName”

Club-honours.component.html

 <div class="row">
<div class="column">
  <div class="PremierLeagues" >
    {{teamenglish.ClubName}}
  </div>
</div>

获取对服务器的请求

GetSingleEnglishTeam(_id: string){
console.log( "ID is "+_id);

return this.http.get<EnglishTeam>('http://localhost:3000/api/getTeamEn/' + `${_id}`);
}

当我控制台记录包含 JSON 对象的变量时，我得到 [Object Object]。

我想要做的是能够向服务器发送一个 getOne 请求，然后服务器返回单个文档。谁能看到我哪里出错了？

标签： javascriptangulartypescripthttp

解决方案

问题是模板在teamenglish变量可以在回调中设置之前被初始化subscribe。

您可以通过 3 种方法解决此问题 -

1.) 在您的模板文件中使用安全导航运算符 (?) ，即 -

{{teamenglish?.ClubName}}

2.) 在容器 div 上使用 *ngIf 仅在teamenglish可用时呈现自身（一旦您的可观察回调将其设置为teamenglish即 -

 <div *ngIf="teamenglish" class="PremierLeagues" >
    {{teamenglish.ClubName}}
  </div>

3.)async在模板中使用管道自动处理订阅和值解析，即

在您的ts文件中，将观测值分配给一个变量，例如 -

const obs = this.englishTeamService.GetSingleEnglishTeam(_id)

然后在您的模板文件中 -

{{obs | async | json}}

推荐阅读