Javascript 如何在模板中运行可观察函数？

我有显示离线和在线用户的状态服务

 // Presence Service
 getPresence(uid: string) {
    return this.db.object(`status/${uid}`).valueChanges();
 }

在组件模板中，我可以像这样运行并获得在线用户

<div *ngIf="presence$ | async as presence" 
    class="tag is-large" 
    [ngClass]="{ 'is-success':  presence.status  === 'online',
                 'is-warning': presence.status  === 'away',
                 'is-danger':  presence.status  === 'offline'
                 }"
>{{ presence.status }}</div>

---

什么也没发生。如何在模板中使用此可观察函数

getPresence（uid:string）

您需要在组件上公开可观察的

presence$

。您可以执行以下操作：

导出类MyComponent{
状态$=this.presenceService.getPresence（“myteamId”）；
构造函数（私有presenceService:presenceService）{}
}

---

如果以这种方式公开组件类上的可观察对象，那么第一个模板应该可以工作

您可能必须为此使用对象缓存，否则每次重新绘制组件时都会得到一个新的可观察对象。通过这种方式，您可以继续使用函数调用，但始终可以获得相应的userStatus流

getPresence(uid: string) {
    this.userStatus[uid]=this.usersStatus[uid]?this.usersStatus[uid]:
    this.db.object(`status/${uid}`).valueChanges();
    return this.userStatus[uid]
 }

另一种选择是假设您将在组件中获取用户对象，并且您可以在传递到视图之前创建可观察的状态

ngOnInit(){
    this.users=http.get('users').pipe(map(users=>{
       return this.users.map(user=>({...user,status:presence.getPresence(user.id)}))
    }))
}

在你看来

<div *ngFor="let user of users | async ">
    <div *ngIf="user.status | async as presence" 
       .....

我需要在html模板中直接使用这个.presenceService.getPresence（“myteamId”）。你的答案是工作。但我尝试在html中使用函数direct。如果你需要像这样使用它，那么重新设计你的应用程序。您永远不知道何时运行更改检测，这会导致再次计算*ngIf中的语句。我怀疑你每次都想这么做是的，芬奇是你的傻瓜，我每次都想这么做。谢谢你的帮助
<div *ngFor="let user of users | async ">
    <div *ngIf="user.status | async as presence" 
       .....