Winkel 2 beobachtbaren nächstes

Question

Ich versuche, die Verwendung von Observablen zu verstehen,

alles ist in den einfachen Fällen in Ordnung, aber in einem Fall mag ich mehrere Bilder komprimieren.

Ich verwende ng2-img-tools

Methode ein Bild zu komprimieren. Dies reduziert die Qualität eines Bildes unter , bis es zu einer bestimmten Dateigröße passt, die als maxSizeInMB angegeben wird. Setzen Sie ignoreAlpha auf true, wenn Sie den Alphakanal für png Bilder ignorieren und trotzdem komprimieren möchten (nicht empfohlen - der Alpha-Kanal geht verloren und das resultierende Bild weicht möglicherweise vom Originalbild ab). Gibt eine Observable zurück, dass für jede Datei onNext entweder eine Datei empfängt, wenn alles wie geplant abgelaufen ist, oder ein Fehlerobjekt, wenn etwas schief gelaufen ist.

In meinem Code, ich tue das folgende:

compressImages(filesToUpload:File[]):Observable<any> { 
    if (filesToUpload && filesToUpload.length > 0) { 
     return this.ng2ImgToolsService.compress(filesToUpload,GlobalService.MAX_FILE_SIZE_MB).map(response => { 
     console.log("response is"); 
     console.log(response) 
     return response; 
     }); 
    } 
    return Observable.of("no_image").map(response => "no_image"); 

    } 


this.imageService.compressImages(filesToUpload).flatMap(result => { 
      console.log(result) 
      return this.http.post(...); 
     } 
    ).catch(UtilsService.handleError); 

das Problem Ergebnis gibt nur 1 Datei ist, weiß ich, ich result.next() irgendwo verwenden sollte, aber ich habe keine Ahnung, wie.

Answer 1

Das Problem ist, dass Sie subscribe für die Funktion benötigen, keine andere Karte ausführen. Wenn Sie zu einer beobachtbaren abonnieren, sind Empfangen Sie implizit den Wert von onNext() als Ergebnis

this.imageService.compressImages(filesToUpload).subscribe(
    result => { 
     // this contains the value of onNext() 
     console.log(result) 
     return  this.imageService.compressImages(filesToUpload).subscribe(
    result => { 
     // this contains the value of onNext() 
     console.log(result) 
     return this.http.post(...); 
    }, error => { 
     // error 
    } this.http.post(...); 
    }, error => { 
     // error 
    } 

more info on subscribing

EDIT

---

wenn Sie möchten, dass alle sammeln Element im Stream und arbeiten auf ihnen als eine Liste, können Sie toList() wie folgt verwenden:

this.imageService.compressImages(filesToUpload).toList().subscribe(
    result => { 
     // this contains all values from the stream 
     console.log(result) 
     return this.http.post(...); 
    }, error => { 
     // error 
    }