Angular 2.0.1 AsyncPipe不适用于Rx Subject

时间:2016-10-06 17:40:02

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

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>

1 个答案:

答案 0 :(得分:4)

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

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

解决方案,在组件中创建一个可观察的变量。