我收到以下错误:
EXCEPTION: Cannot find a differ supporting object '[object Object]' in [files | async in Images@1:9]
这是模板的相关部分:
<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);
}
}
The console.log
最后表明它是一个可观察的:
this.imagesData.getData()
从 Angular 返回一个常规的 RxJS 可观察值Http
服务,那么为什么异步管道不能与它一起工作呢?也许我正在使用的方式flatMap()
是错误的并且弄乱了一些东西吗?
如果我尝试像这样订阅这个可观察的:
this.files = this._rawFiles
.skip((this.currentPage - 1) * imagesPerPage)
.take(imagesPerPage)
.subscribe(file => {
console.log("file:", file);
});
它按预期打印对象列表:
尝试使用Observable<File[]>
反而:
this.files = this._rawFiles
.skip((this.currentPage - 1) * imagesPerPage)
.take(imagesPerPage)
.map(file => [file])
.startWith([])
.scan((acc,value) => acc.concat(value))
这应该不需要手动代码subscribe
并且应该与您当前的模板完美配合。
我做了一些非常类似的事情这篇博文。 http://lukajcb.github.io/blog/angular2/2016/04/02/frp-in-angular-2.html
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)