在Angular 2视图中显示来自observable的嵌套数据

Question

我在Rx中使用基于BehaviorSubject的应用程序状态服务，该应用程序状态服务公开Observables以供组件使用。在我的一个组件中，如果它存在，我想显示一些嵌套的数据。

这就是我试图

<div>>{{ sharedState.loadedAccountDetails.accountId | async }}</div> 

其中产量我，不能够得到的不确定帐户ID这对我来说很有意义，但我想也许异步管会帮助我在这里一个错误。

在我的组件共享状态只是一个Observable我不认为有很多可以显示。

最终，我想在显示它的数据时显示这些数据，当它不存在时不显示任何数据。我怎样才能做到这一点？

Answer 1

您需要直接在Observable上使用async管道，而不是从Observable发射的值。在你的模板中使用这个代替：

<div>{{ (sharedState | async)?.loadedAccountDetails.accountId }}</div> 

具有下列组分：

import { Component } from '@angular/core'; 
import { Observable, Subject } from 'rxjs'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    I'm Loaded! 
    <div>{{ (sharedState | async)?.loadedAccountDetails.accountId }}</div> 
    ` 
}) 
export class AppComponent { 

    sharedState: Observable = null; 
    private subject = new Subject(); 

    constructor() { 
    this.sharedState = this.subject.asObservable(); 
    setTimeout(_ => { 
     this.subject.next({ 
     loadedAccountDetails: { 
      accountId: 42 
     } 
     }); 
    }, 1000); 
    } 

} 

本演示展示组件已被创建后一秒数42。

见现场演示：http://plnkr.co/edit/fGtNVOZWndYU22U4sRow