Angular 2.0.1 AsyncPipe 不适用于 Rx Subject
Angular 2.0.1 AsyncPipe doesn't work with Rx Subject
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>
这里的问题是从我的模板调用一个方法 - 这意味着每次运行变化检测时,我都会调用你的 getFoo() 函数,returns 一个可观察对象的新实例,它会重置异步管道。
因此,无论您在 NgFor 中调用 getFoo(),代码都会失败。
解决方案,在组件中创建一个可观察变量。
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>
这里的问题是从我的模板调用一个方法 - 这意味着每次运行变化检测时,我都会调用你的 getFoo() 函数,returns 一个可观察对象的新实例,它会重置异步管道。
因此,无论您在 NgFor 中调用 getFoo(),代码都会失败。
解决方案,在组件中创建一个可观察变量。