Question

我的json文件包含以下内容：

"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＆lt; HtmlImageElement＆gt;。

我如何实现加载此json文件并返回

的方法

Observable< BrushPreset[]>

Answer 1

好吧，我设法解决了这个问题。答案是将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()

RxJS - 构造具有异步解析属性的对象

1 个答案: