Verschachtelte Daten von Observable in Angular 2 anzeigen

Question

Ich verwende einen Dienst für den Anwendungsstatus basierend auf BehaviorSubject s in Rx, der Observables für die zu verwendenden Komponenten verfügbar macht. In einer meiner Komponenten möchte ich einige verschachtelte Daten zeigen, wenn sie vorhanden sind.

Das ist, was ich

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

versuche Was mir eine Fehlermeldung über nicht in der Lage zu bekommen Konto Id undefinierten, die aber ich dachte, vielleicht das Asynchron-Rohr mir hier macht Sinn für mich ergibt helfen würde.

In meiner Komponente shared state ist nur ein Observable Ich glaube nicht, es gibt viel zu zeigen.

Letztendlich möchte ich diese Daten zeigen, wenn es vorhanden ist und nichts anzeigen, wenn es nicht da ist. Wie kann ich das erreichen?

Answer 1

Sie müssen die async Pipe direkt auf dem Observable verwenden, nicht Werte von Observable emittiert. In der Vorlage diesen statt:

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

mit den folgenden Komponenten:

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); 
    } 

} 

Diese Demo zeigt Nummer 42 eine Sekunde nach der Komponente erstellt wurde.

Siehe Live-Demo: http://plnkr.co/edit/fGtNVOZWndYU22U4sRow