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

Question

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

 // 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) 函数，如下所示:

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

什么都没发生。我如何在模板中使用此可观察函数 getPresence(uid: string)

Answer 1

您需要在您的组件上公开可观察到的presence$。您可以执行以下操作:

export class MyComponent {
    presence$ = this.presenceService.getPresence("myteamId");

    constructor(private presenceService: PresenceService) {}
}

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