正确显示可观察对象的值

Question

嘿，所以我越来越开始使用Angular，现在我正在做我的第一个项目，我通过服务方法从数据库中获取数据：

  getPost(postID: String) {
    this.postDocument = this.db.doc('posts/' + postID)
    return this.postDocument.valueChanges()
  }

我在组件内部调用该方法

  ngOnInit() {
    this.currentPost = this.route.paramMap.pipe(
      switchMap((params: ParamMap) => this.fs.getPost(params.get('id')))
    )
  }

到目前为止，该方法仍然有效，但我真的不明白如何在HTML中显示数据？例如，这给我带来了什一税是零的，即使正确显示也是如此。

<div>
  post-read-page works!
  <h1 *ngIf="currentPost">{{ (currentPost | async).titel }}</h1>
</div>

预先感谢

确切错误：ERROR TypeError: Cannot read property 'titel' of null

Answer 1

问题在于currentPost也可以为null，因此您还需要正确处理模板中的null大小写，以免出现错误。 正如评论中已经建议的那样，您可以使用safe navigation operator（？。）来解决此问题。

然后您的绑定看起来像这样：

<div>
  post-read-page works!
  <h1 *ngIf="currentPost">{{ (currentPost | async)?.titel }}</h1>
</div>