Угловое 2 AsynPipe не работает с наблюдаемом

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() возвращение регулярного RxJS Наблюдаемого из Http службы угловой, так почему бы не асинхронная работа трубы с ним? Может быть, так, как я использую 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)) 

Для этого не требуется ручной код t o subscribe и должен отлично работать с вашим текущим шаблоном.

я сделать что-то очень похожее на this blog post.