Angular 2.0.1 AsyncPipe 不适用于 Rx 主题答案

【问题标题】：Angular 2.0.1 AsyncPipe doesn't work with Rx SubjectAngular 2.0.1 AsyncPipe 不适用于 Rx 主题
【发布时间】：2017-02-15 13:51:54
【问题描述】：

AsyncPipe 与 BehaviorSubject 一起使用，但我不想用空数据初始化我的服务，因此我使用 Subject intead。

问题是 NgFor 和 asyncPipe 不适用于 Subject，这是一个问题吗？

这行得通：

组件：

export class AppComponent {
  foo = new BehaviorSubject<Array<number>>([1,2,3]);

  getFoo(){
     return this.foo.asObservable();
  }
}

模板

<span *ngFor="let e of foo.asObservable() | async">{{e}}</span>

这不起作用：

组件

export class AppComponent {
  foo = new Subject<Array<number>>();

  constructor(){
     setTimeout(() => {
          this.foo.next([1,2,3]);
     }, 3000);
  }

  getFoo(){
     return this.foo.asObservable();
  }
}

模板

<span *ngFor="let e of foo.getFoo() | async">{{e}}</span>

【问题讨论】：

你能提供一个小提琴/plunk来复制这个问题吗？
查看更新@estus
我猜问题是.asObservable()，它不应该在那里。

标签： angular rxjs angular2-template behaviorsubject subject-observer

【解决方案1】：

这里的问题是从我的模板中调用一个方法 - 这意味着每次更改检测运行时，我都会调用您的 getFoo() 函数，该函数会返回一个新的 observable 实例，它会重置异步管道。

因此，无论您是否在 NgFor 中调用 getFoo()，代码都会失败。

Solucion，在组件中创建一个可观察变量。

【讨论】：

您没有在模板中的任何位置调用getFoo()。
对不起，在错误的情况下我创建了getFoo()，但我忘记在视图中调用它。我现在才更新。无论如何，同样的行为是因为我打电话给asObservable()。谢谢。
您能否详细说明“在组件中创建一个可观察变量”？我的组件中有一个像 private user: Observable<User>; 这样的变量。但是……这没有用！你必须初始化 observable 还是什么？