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

【问题标题】：Display nested data from observable in Angular 2 view在 Angular 2 视图中显示来自 observable 的嵌套数据
【发布时间】：2017-02-21 11:53:04
【问题描述】：

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

这就是我正在尝试的

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

这给我带来了一个错误，即无法获得未定义的帐户 ID，这对我来说很有意义，但我认为异步管道可能会在这里帮助我。

在我的组件中，共享状态只是一个Observable，我认为有很多东西可以展示。

最终，我想在数据存在时显示该数据，而在其不存在时不显示任何内容。我怎样才能做到这一点？

【问题讨论】：

标签： angular rxjs angular2-template rxjs5

【解决方案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

【讨论】：

我确实必须在loadedAccountDetails上使用?以避免另一个错误，但谢谢你。
我想我的问题是它看起来有点难看 - 有没有更好的方法来做到这一点？
@Barry 如果您想使用async 管道并将所有内容保留在模板中，我不这么认为。