Question

我有一个服务，有一些异步的东西要做，如何推迟数据绑定渲染，直到服务完成其异步工作？

<div *ngIf="screenSize < 1024">mobile element</div>

服务：

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

用户未定义，因为会话尚未就绪：

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

如何使用带有onSessionChange observable的管道？

Answer 1

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

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

如果您要在模板中的多个位置使用session，这会更有用。

<ng-container>可以在不向DOM添加更多节点的情况下挂起*ngIf或*ngFor。

Answer 2

正如@Sajeetharan回答的那样，您可以使用safe navigation operator来避免从模板中抛出未定义的错误。

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

Step1：在组件中公开Observable：

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

第2步：在模板中使用Async Pipe订阅已创建的Observable

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

正在使用 DEMO

Answer 3

你也可以使用 safe navigation operator ，

来处理这种方式

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

Answer 4

使用pluck运算符获得异步属性：

在组件：

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

在模板上：

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

如何在Angular中异步管道一个observable

4 个答案: