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

2024-05-02 • 问答

我有在线状态服务，可以显示离线和在线用户

 // 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)

您将需要在组件上公开presence$。您可以执行以下操作：

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

    constructor(private 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" 
       .....

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

lengci 回答：如何在模板中运行可观察函数？

大家都在问