正确显示可观测目标值

时间 2019-02-22
阅读 25
点赞 0
收藏 0
连接badgy

嘿,我开始越来越多地使用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

建议答案

问题是currentPost也可以为空,因此您还需要正确处理模板中的空大小写,以避免出现错误。 正如评论中所建议的,您可以使用safe navigation operator?)处理这件事。

然后您的绑定如下所示:

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