Question

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

这就是我的尝试

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

这让我产生了一个错误，即无法获得未定义的帐户ID，这对我来说很有意义，但我想也许异步管道可以帮助我在这里。

在我的组件中，共享状态只是一个Observable我没有＆＃39;认为有很多东西要表现出来。

最终，我希望在它出现时显示这些数据，并在不存在时显示任何内容。我怎样才能做到这一点？

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的嵌套数据

1 个答案: