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

Question

我在 Rx 中使用基于 BehaviorSubjects 的应用程序状态服务，它公开 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

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

Display nested data from observable in Angular 2 view

rxjs

angular2-template

rxjs5

angular