如何在角度异步管道可观察到

我有一个服务有一些异步的东西要做，我如何推迟数据绑定呈现，直到服务完成其异步工作？如何在角度异步管道可观察到

this.sessionService.onSessionChange().subscribe(function(session) { 
    console.log(session); 
    self.user = session.user; 
});

服务：

onSessionChange(): Observable<Session> { 
    return this.sessionObservable.asObservable(); 
}

用户是不确定的，因为会议还没有准备好：

<h4>Hi {{user.name}}.</h4>

如何使用管道与我onSessionChange观察到的？

来源

2017-08-14 el_pup_le

您可以处理这种方式也使用safe navigation operator，

<h4>Hi {{user?.name}}.</h4>

来源

2017-08-14 02:04:25 Sajeetharan

由于@Sajeetharan回答，您可以使用safe navigation operator避免模板抛出未定义的错误。

正如您在问题标题中所述，您可以使用Async Pipe自动订阅/取消订阅Observable。

第一步：暴露可观察你的分量：

// expose Observable in order to access at template 
user$: any; 
constructor(private sessionService: SessionService) { 
    this.user$ = this.sessionService.onSessionChange(); 
}

第二步：使用Async Pipe在您的模板订阅创建可观测

<h4>Hi {{(user$ | async)?.user.name}}.</h4>

工作DEMO

来源

2017-08-14 02:23:54 Pengyy

没有任何理由，我应该还是用异步管比安全的导航操作员？ –

@el_pup_le它们没有任何冲突。但是通过使用'async pipe'，你不需要退出'ngOnDestroy'处的observable来防止内存泄漏。这是因为'async pipe'会自动为你做。 – Pengyy

'（用户$ |异步）'后面的'？'是不必要的。 – 2017-08-14 03:03:57

在Angular4 ，一个常见的习惯用法是使用新的as关键字如下：

<ng-container *ngIf="session$ | async as session"> 
           <!-- ^^^^^^^^^^ "as" keyword --> 
    <h4>Hi {{session.user.name}}</h4> 
</ng-container>

这甚至更多，如果你要在你的模板使用session在多个地方非常有用。

<ng-container>是一个挂起*ngIf或*ngFor而不添加更多节点到DOM的地方。

来源

2017-08-14 03:56:45

这不工作，它不显示。我需要修改其他任何东西吗？ –

我没有得到它与Promise一起工作，但我想使用可观察 –

使用pluck运营商有一个异步属性：

在组件：

this.userName$ = this.sessionService.onSessionChange().pluck('user', 'name')

在模板：

<h4>{{ userName$ | async }}</h4>

来源

2017-10-25 12:10:31 VuuRWerK

如何在角度异步管道可观察到

回答

相关问题