gpt4 book ai didi

javascript - Angular 2 AsynPipe 不与 Observable 一起工作

转载 作者:太空狗 更新时间:2023-10-29 17:37:22 25 4
gpt4 key购买 nike

我收到以下错误:

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);
}
}

最后的 console.log 显示它是一个可观察的:

last console.log

this.imagesData.getData() 从 Angular 的 Http 服务返回一个常规的 RxJS observable,那么为什么异步管道不能使用它呢?也许我使用 flatMap() 的方式是错误的,它搞砸了?

如果我尝试像这样订阅这个 observable:

this.files = this._rawFiles
.skip((this.currentPage - 1) * imagesPerPage)
.take(imagesPerPage)
.subscribe(file => {
console.log("file:", file);
});

它按预期打印对象列表:

enter image description here

最佳答案

尝试使用 Observable<File[]>相反:

this.files = this._rawFiles
.skip((this.currentPage - 1) * imagesPerPage)
.take(imagesPerPage)
.map(file => [file])
.startWith([])
.scan((acc,value) => acc.concat(value))

这应该不需要手动代码 subscribe并且应该与您当前的模板完美配合。

我在 this blog post. 中做了非常相似的事情

关于javascript - Angular 2 AsynPipe 不与 Observable 一起工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36686465/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com