Question

我有来自firebase的观察结果。

我服务中的相关代码是：

interface User {
uid: string;
email: string;
}    

public user: Observable<User>;

getUserDetails(uid) {
this.userDocument = this.afs.collection('users').doc(uid)
this.user = this.userDocument.valueChanges();
return this.user
}

ngOninit() {
this.user = this.getUserDetail(uid)
}

要查看observable中的变量，我有这段代码：

<h1>Json: {{user | async | json}}</h1>

反过来吐出来：

Json: {"email": "xxx@somemail.com", "uid": "DbeFlYvdbqTP12vPE7x4hJFashe2" }

然而，下面的内容对我毫无兴趣。为什么这不起作用？

<h1>Email: {{user.email | async}} </h1>
<h1>Uid: {{user.uid | async}} </h1>

Answer 1

应该完成，

 <h1>Email: {{(user| async)?.email}} </h1>
 <h1>Uid: {{(user | async).uid}} </h1>

Answer 2

您还可以使用ngIf来避免多个异步管道：

<div *ngIf="user|async as userObj">{{userObj|json}} is just an object now</div>

角度可观察的基础知识

2 个答案: