RxJS - Observable.mapは、非同期初期化を伴うオブジェクトを生成します。

Question

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

この例からです。 「Actualite」コンストラクタは非同期（URLからロードイメージをキャンバスに、それを操作する）、そのプロパティの1つの値を生成

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

を作成しているとき、私はのLoadイベントから作成され、観察への参照を追加することをお勧めしたい、この例のように、何度ではありませんactualiteクラスの画像です。

今、あなたは外

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

からこの観察可能なを使用することができます

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 ...*/) 
    } 
} 

ような何か