Angular 2 AsynPipe不使用Observable [英] Angular 2 AsynPipe isn't working with an Observable
问题描述
我收到以下错误:
EXCEPTION: Cannot find a differ supporting object '[object Object]' in [files | async in Images@1:9]
以下是模板的相关部分:
Here's the relevant part of the template:
<img *ngFor="#file of files | async" [src]="file.path">
这是我的代码:
export class Images {
public files: any;
public currentPage: number = 0;
private _rawFiles: any;
constructor(public imagesData: ImagesData) {
this.imagesData = imagesData;
this._rawFiles = this.imagesData.getData()
.flatMap(data => Rx.Observable.fromArray(data.files));
this.nextPage();
}
nextPage() {
let imagesPerPage = 10;
this.currentPage += 1;
this.files = this._rawFiles
.skip((this.currentPage - 1) * imagesPerPage)
.take(imagesPerPage);
console.log("this.files:", this.files);
}
}
console.log
最后显示它是一个可观察的:
The console.log
at the end shows that it's an observable:
this.imagesData.getData()
从Angular的 Http
服务返回一个常规的RxJS observable,那么为什么异步管道不能用呢?也许我使用 flatMap()
的方式是错误的,它会让人感到困惑?
this.imagesData.getData()
return a regular RxJS observable from Angular's Http
service, so why wouldn't async pipe work with it? Maybe the way I'm using flatMap()
is wrong and it messes something up?
如果我尝试订阅这样的observable:
If I try to subscribe to this observable like that:
this.files = this._rawFiles
.skip((this.currentPage - 1) * imagesPerPage)
.take(imagesPerPage)
.subscribe(file => {
console.log("file:", file);
});
它按预期打印对象列表:
It prints a list of objects as expected:
推荐答案
尝试使用 Observable< ;文件[]>
代替:
this.files = this._rawFiles
.skip((this.currentPage - 1) * imagesPerPage)
.take(imagesPerPage)
.map(file => [file])
.startWith([])
.scan((acc,value) => acc.concat(value))
这应该不需要手动代码订阅
,并且应该与您当前的模板完美配合。
This should require no manual code to subscribe
and should work perfectly with your current template.
我在< a href =http://lukajcb.github.io/blog/angular2/2016/04/02/frp-in-angular-2.html\"rel =nofollow>此博文。
这篇关于Angular 2 AsynPipe不使用Observable的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!