Отображение вложенных данных из наблюдаемого в режиме Angular 2

Question

Я использую государственную службу приложения на основе BehaviorSubject s в Rx, которая предоставляет Observables для компонентов, с которыми необходимо работать. В одном из моих компонентов я хочу показать некоторые вложенные данные, если он присутствует.

Это то, что я пытался

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

что дает мне ошибку о не в состоянии получить счет Идентификатор неопределенных, который имеет смысл для меня, но я думал, что, возможно, асинхронная труба поможет мне здесь.

В моем общем состоянии компонента есть только Observable Я не думаю, что есть что показать.

В конечном счете, я хочу показать эти данные, когда его настоящее и ничего не отображает, когда его нет. Как я могу это достичь?

Answer 1

Вам необходимо использовать трубу 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