如何在角度异步管道可观察到
我有一个服务有一些异步的东西要做,我如何推迟数据绑定呈现,直到服务完成其异步工作?如何在角度异步管道可观察到
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观察到的?
您可以处理这种方式也使用safe navigation operator
,
<h4>Hi {{user?.name}}.</h4>
由于@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
在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的地方。
这不工作,它不显示。我需要修改其他任何东西吗? –
我没有得到它与Promise一起工作,但我想使用可观察 –
使用pluck
运营商有一个异步属性:
在组件:
this.userName$ = this.sessionService.onSessionChange().pluck('user', 'name')
在模板:
<h4>{{ userName$ | async }}</h4>
没有任何理由,我应该还是用异步管比安全的导航操作员? –
@el_pup_le它们没有任何冲突。但是通过使用'async pipe',你不需要退出'ngOnDestroy'处的observable来防止内存泄漏。这是因为'async pipe'会自动为你做。 – Pengyy
'(用户$ |异步)'后面的'?'是不必要的。 – 2017-08-14 03:03:57