Angular 2 AsynPipe 没有与 Observable 一起工作

Question

我收到以下错误：

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 表明它是一个可观察的：

this.imagesData.getData() return 从 Angular 的 Http 服务可观察到的常规 RxJS，那么为什么异步管道不能使用它呢？也许我使用 flatMap() 的方式是错误的，它搞砸了？

如果我尝试像那样订阅这个可观察对象：

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

它按预期打印对象列表：

Answer 1

尝试使用 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.

中做了非常相似的事情

Angular 2 AsynPipe 没有与 Observable 一起工作

Angular 2 AsynPipe isn't working with an Observable

javascript

reactive-programming

observable

rxjs

angular