Typescript 将可观察对象链接到一个订阅

我有一个名为“Item”的模型类，它需要从后端加载两个独立的图像（精确地说是精灵纹理和阴影纹理）。我实现了并行加载并最终将纹理连接到我的项目中，这样我就可以在另一个地方订阅它

现在，当我使用Base64将文件传输到我的Angular2应用程序时，我已经实现了这一点。但现在我想处理普通的斑点。尽管Angular2还不支持这一点，但完全可以读取响应的私有体属性。问题是，我的模型类应该以

HTMLImageElements

的形式检索图像，并将数据解析为Base64数据url。要从blob生成此数据url，我需要使用基于回调的

FileReader.readAsDataUrl（）

。我想我已经知道了如何将这个回调包装成一个可观察的（如果这个方法是错误的，请纠正我，因为我现在无法确认）

因此，现在我根本不知道如何正确地链接我的调用，以便能够订阅生成的可观察对象，然后生成我的项目，如

ItemService.getItem（1）.subscribe（Item=>…）

当前的设置给了我一个奇怪的错误，说明subscribe方法没有在结果的Observable上定义。我是RxJS的新手，如果有人能告诉我如何正确设置，我会非常高兴：）

/*在ItemService中的实现*/
getItem（id:number）：可观察{
返回Observable.forkJoin（//连接两个纹理获取
this.http.get（'/api/items/'+id+'/sprite'），//获取sprite纹理
this.http.get（'/api/items/'+id+'/shadow'），//获取阴影纹理
（spriteResponse，shadowResponse）=>{
//将响应转换为适当的blob
const spriteBlob=新Blob（[spriteResponse._body]，{type:'image/png'}）
const shadowBlob=新Blob（[shadowResponse.\u body]，{type:'image/png'}）
返回[spriteBlob，shadowBlob]
})
.flatMap（result=>Observable.forkJoin（//chain with join image generation（非常确定这是错误的）
ItemService.generateImage（结果[0]），//将spriteBlob解析为图像
ItemService.generateImage（结果[1]），//将shadowBlob解析为图像
（精灵图像，阴影图像）=>{
//从图像组装模型
常量项=新项（）
项目.设置价格（spriteImage）
项目.设置阴影（阴影图像）
退货项目
})
)
}
静态生成图像（数据：Blob）：可观察{
const img=new Image（）//创建新的HTML图像
const reader=new FileReader（）//初始化文件读取器
reader.readAsDataURL（data）//将blob转换为base64数据url
//从回调创建可观察（这是否正确？）
返回Observable.bindCallback（reader.onloadend，（）=>{
img.src=reader.result
返回img
})
}

问题是双重的。首先是

bindCallback

返回一个函数，该函数在调用时返回一个

可观察的

，而不返回一个

可观察的

。绑定回调的思想是将通常通过回调报告其异步结果的函数转换为可观察的

在这种情况下，您实际上正在等待触发事件（
loadend
），因此您可能希望使用
fromEvent

static generateImage(data:Blob):Observable<HTMLImageElement> {
    const reader = new FileReader() // init file reader
    reader.readAsDataURL(data)  // transform blob to base64 data url

    // create observable from callback (is this correct?)
    return Observable.fromEvent(reader, 'load', (e) => {
       var img = new Image();
       img.src = reader.result;
       return img;
    }).first();
}

静态生成图像（数据：Blob）：可观察{
const reader=new FileReader（）//初始化文件读取器
reader.readAsDataURL（data）//将blob转换为base64数据url
//从回调创建可观察（这是否正确？）
返回可观察的.fromEvent（读卡器，'load'，（e）=>{
var img=新图像（）；
img.src=reader.result；
返回img；
}).first（）；
}

现在，这不是非常强大，但应该完成工作。如果你想看到一个更完整的例子，有一个为RxJS4编写的方法，你可以根据自己的目的使用它（RxJ5的版本还没有实现）。
问题是双重的。首先是
bindCallback
返回一个函数，该函数在调用时返回一个
可观察的
，而不返回一个
可观察的
。绑定回调的思想是将通常通过回调报告其异步结果的函数转换为可观察的

在这种情况下，您实际上正在等待触发事件（
loadend
），因此您可能希望使用
fromEvent

static generateImage(data:Blob):Observable<HTMLImageElement> {
    const reader = new FileReader() // init file reader
    reader.readAsDataURL(data)  // transform blob to base64 data url

    // create observable from callback (is this correct?)
    return Observable.fromEvent(reader, 'load', (e) => {
       var img = new Image();
       img.src = reader.result;
       return img;
    }).first();
}

静态生成图像（数据：Blob）：可观察{
const reader=new FileReader（）//初始化文件读取器
reader.readAsDataURL（data）//将blob转换为base64数据url
//从回调创建可观察（这是否正确？）
返回可观察的.fromEvent（读卡器，'load'，（e）=>{
var img=新图像（）；
img.src=reader.result；
返回img；
}).first（）；
}

现在，这不是非常强大，但应该完成工作。如果你想看到一个更完整的例子，有一个为RxJS4编写的方法，你可以为你的目的使用它（RxJ5的版本还没有实现）。
谢谢，现在图像解析正确了，但是第二个fork的选择器连接了（从事件中创建的observable）你知道为什么吗？我使用的flatMap调用是否正确？啊，是的，问题是，
forkJoin
在发出前等待源代码完成，
fromEvent
未完成，因此您需要向其添加
first
或
take（1）
。谢谢，图像现在已正确解析，但第二个fork join的选择器（从事件中创建的可观察对象）被连接的地方没有被调用，你知道为什么吗