각도 2에서 관측 가능한 중첩 된 데이터를 표시합니다.

Question

Rx에서 BehaviorSubject을 기반으로하는 응용 프로그램 상태 서비스를 사용 중이므로 구성 요소가 작동하도록 Observables이 표시됩니다. 내 구성 요소 중 하나에서 중첩 된 데이터가 있으면 그 중첩 된 데이터를 표시하려고합니다. 이것은 내가 나에게 나에게 의미가 있지만, 내가 비동기 파이프가 여기 좀 도와 것이다 아마 생각 정의의 계정 ID 얻을 수 없다는 대한 오류를 얻을 수

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

을하려고했던 것입니다

.

내 구성 요소 공유 상태는 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