Javascript 如何在HTML中显示TypeScript对象（Ionic/Firebase/Angular）

如何在HTML文件中显示对象？（使用离子）它看起来相当简单，但不起作用。我从数据库路径的快照中检索对象，如下所示：

this.userPath.subscribe(snapshots => {
  this.snapshotValue = snapshots.val()
  console.log(this.snapshotValue);
})  

控制台的外观如下所示：

（我没有发布图片的“声誉”）

我觉得我什么都试过了。比如：

<h1>{{snapshotValue}}</h1>  //this returns "[object object]"
<h1>{{snapshotValue.navn}}</h1>  //this gives me an error: "cannot read property navn of undefined"
<h1>{{snapshotValue[0]}}</h1>   //this gives me an error: "cannot read property '0' of undefined.

{{snapshotValue}}//返回“[object object]”
{{snapshotValue.navn}}//这给了我一个错误：“无法读取未定义的属性navn”
{{snapshotValue[0]}}//这给了我一个错误：“无法读取未定义的属性“0”。

---

如何从该对象获取单个值？

在数据可用之前尝试渲染视图时会发生这种情况。请尝试以下方法

在组件中声明一个布尔变量

private isDataAvailable:boolean=false;

在subscribe方法中，一旦数据可用，就将此

设置为true

this.userPath.subscribe(snapshots => {
  this.snapshotValue = snapshots.val()
  console.log(this.snapshotValue);
  this.isDataAvailable=true;
}) 

并在数据可用后使用*ngIf重新排序模板

<div *ngIf="isDataAvailable">
    <h1>{{snapshotValue}}</h1>  
    <h1>{{snapshotValue.navn}}</h1>  
    <h1>{{snapshotValue[0]}}</h1>   
</div>

{{snapshotValue}}
{{snapshotValue.navn}
{{snapshotValue[0]}

---

这应该可以做到这一点。您也可以使用异步管道进行同样的操作。查找文档

{{snapshotValue}json}//这应该会返回一个{stringized json}

您希望将异步管道与elvis操作符（？）一起用于观察值。下面仅使用elvis

<h1>{{snapshotValue?.navn}}</h1>

你能行

<h1>{{(userPath | async)?.navn}}</h1>

{{（用户路径|异步）？.navn}

---

异步管道执行subscribe并获取最新的值，以便您在angular try中查看对象：

{{snapshotValue | json}}

我实际上尝试了这个方法。它可以正常工作。但这会显示整个对象。我不知道如何使用它来获取一个属性。如果我键入：{snapshotValue.navn | json}它无法再次找到snapshotValue属性。看起来您使用的是可观察的。因此请尝试：

{{snapshotValue？.navn}

@MarcelFrehe非常感谢！它很有效。我在这方面花了很多时间。你是真正的mvp。MarcelFrehe刚刚为我评论了一个有效的解决方案。但是感谢你的回复。这实际上解决了我在快照方面的另一个问题。干杯。只是一个小评论，而不是创建另一个变量来检查值是否存在如果对象存在，你可以用snapshotValue替换ngIf，然后你可以显示它的属性。我下面的答案是一种更优雅的方式，我认为只要它没有初始化数据，就可以这样做：）非常感谢！Marcel Frehe评论了同样的事情。这正是我需要的。干杯。-抱歉我不能对你的评论投反对票，因为我还没有这个名声。另外，你可以看看如何以及何时使用管道。

<h1>{{(userPath | async)?.navn}}</h1>