RxJS - 構造對象與性能得到解決異步

-2

"brushPresets": 
[ 
{ 
    "name": "fur", 
    "imageUrl": "brush.png", 
    "func": "spray", 
    "scale": "1" 
}, 
{ 
    "name": "tinsel", 
    "imageUrl": "brush.png", 
    "func": "fur", 
    "scale": "1" 
}, ....]

我需要構建具有以下特性BrushPreset對象的數組：

name:string, 
image:HTMLImageElement, 
func:Function, 
scale:number

因此，我需要先加載一個json文件，然後爲每個刷子異步加載一個圖像，並將其分配給BrushPreset對象的image屬性。

loadImage（url：string）方法已經實現並返回Observable < HtmlImageElement>。

我將如何實現加載此JSON文件，並返回

Observable< BrushPreset[]>

來源

2017-04-23 Daniil Andreyevich Baunov

請查看指南https://stackoverflow.com/help/how-to-ask。正如目前所表達的，你的問題太廣泛，並沒有顯示任何研究或嘗試解決問題的跡象。您也可以查看https://stackoverflow.com/help/mcve – user3743222

對不起。如果我的嘗試都不成功，我該如何證明我試圖解決這個問題？我在看mergeMap，concatMap，forkJoin。但沒有找到合適的運營商組合來解決問題。而且只會迷惑自己。因此，我試圖在沒有嘗試的情況下儘可能清楚地說明問題。 –

如果你的一次嘗試成功了，那麼你就不會有問題。絕大多數人發佈問題就是這種情況。但是，建議您練習您已經做出的研究（請參閱指南），以及您遇到並未解決的問題。在很多情況下，這涉及到顯示您嘗試過的一些代碼，但沒有奏效。其次，如你的問題所表達的那樣，它太寬泛了：加載一個json文件，加載一個圖像等等。這些都可能是它們自己的問題（我如何加載文件？）。 – user3743222

好方法，我設法解決這個問題。答案是concatMap與forkJoin結合像以下：

下面的代碼，因爲它是在項目：

this.presets$ = 
     this.http.get('./assets/brushes/brushes.json') 
      .map((res:Response) => res.json()["brushPresets"]) 
      .concatMap(objAr => 
       Observable.forkJoin(objAr.map(obj => 
        this.loadImage(obj["image"]) 
         .map(image => { 
         return new BrushPreset(obj["name"], image, BRUSH_FUNCTIONS[item["func"]], obj["scale"]); 
         }) 
       ) 
      ) 
     );

編輯：

這裏有一個替代的解決方案。

this.presets$ = 
     this.http.get('./assets/brushes/brushes.json') 
      .map((res:Response) => res.json()["brushPresets"]) 
      .mergeMap(this.loadImage, (item, image) => { 
      return new BrushPreset(
       item["name"], 
       image, 
       BRUSH_FUNCTIONS[item["func"]], 
       item["scale"]); 
      }) 
      .toArray()

來源

2017-04-23 19:07:41

RxJS - 構造對象與性能得到解決異步

回答

相關問題