Angular 2 AsynPipe不使用Observable [英] Angular 2 AsynPipe isn't working with an Observable

查看:84
本文介绍了Angular 2 AsynPipe不使用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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆