kątowa 2 AsynPipe nie działa z obserwowalnych

Question

Dostaję następujący błąd:

EXCEPTION: Cannot find a differ supporting object '[object Object]' in [files | async in Images@1:9] 

Oto odpowiednia część szablonu:

<img *ngFor="#file of files | async" [src]="file.path"> 

Oto mój kod:

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

Na końcu console.log widać:

this.imagesData.getData() zwrócić regularne RxJS obserwowalne od Http usługi kanciasty, więc dlaczego nie asynchroniczny praca rura z nim? Być może sposób, w jaki używam flatMap() jest zły i to coś niepołączone?

Gdy próbuję zapisać się do tego zaobserwować tak:

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

Drukuje listę obiektów, zgodnie z oczekiwaniami:

Answer 1

Spróbuj z Observable<File[]> Zamiast:

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

To nie powinno wymagać ręcznego kodu t o subscribe i powinien działać idealnie z bieżącym szablonem.

zrobić coś bardzo podobnego w this blog post.