RxJS - Observable.map用異步初始化生成對象

Question

return this.http.get(url) 
.map((response:Response) => { 
    return (<any>response.json()).map(actu => new Actualite(actu));  
}); 

從此示例。 在「Actualite」構造產生其性質異步中的一個的值（從URL加載圖像，並將其操縱至帆布）

export class Actualite { 
Credit: string; 
Mini: string; 
/* ... */ 


constructor(fichier:any) { 
    this.Credit =  fichier.Credit || ''; 
    this.Mini =   fichier.Mini || ''; 
    /* ... */ 


    if(this.Mini) { 
     let img:HTMLImageElement = new Image(); 
     img.src = this.Mini; 

     img.addEventListener('load',()=> { 

      let canvas:HTMLCanvasElement = document.createElement('canvas'); 
      canvas.width = img.width; 
      canvas.height = img.height; 
      let ctx:CanvasRenderingContext2D = canvas.getContext('2d'); 

      /*....... Image transformation......*/ 

      this.Data = canvas.toDataURL(); 


     }) 
    } 
} 

}

所以我想訂閱此可觀察到第一碼在異步對象初始化結束，而不是如在本例中，當對象被創建

由於

Answer 1

我建議添加到從的加載事件創建的可觀察到的一個參考圖像在actualite類。

喜歡的東西

constructor(fichier:any) { 
    /*...*/ 
    this.loadObservable = Rx.Observable.empty() // case where `Mini` is false 
    // you can also return a Rx.Observable.of(defaultValue) if you need something on the other side 

    if (this.Mini) { 
     let img:HTMLImageElement = new Image(); 
     img.src = this.Mini; 

     this.loadObservable = Rx.Observable 
      .fromEvent(img, "load") 
      .map(event => /*... do you stuff with the image ...*/) 
    } 
} 

現在你可以使用這個觀察到的從外面

return this.http.get(url) 
    .map((response:Response) => { 
    return (<any>response.json()) 
     .map(actu => new Actualite(actu)) 
     .mergeMap(actu => actu.loadObservable); // this will emit when the loadObservable emits 
    });