Question

我有一个带有http帖子的服务

saveItem(item: Item): Observable<number> {
    return this.http
    .post(`${this.baseUrl}/items`, item.createJson(), this.getHeaders())
    .map(this.getIdFromItem)
    .catch(this.handleError);
}

我在我的组件中的保存方法中调用它

save(item: Item): boolean {
    if (!this.isValid()) {
        return false;
    }
    this.itemService.saveItem(this.item)
    .subscribe(id => {
        this.item.id = id;
        return true;
    },
    error => {return false;}
    )
}

在同一个组件中，用户可以上传与该项目相关的图片 - 但我需要在上传图片之前保存该项目。

{
    if (!this.save(this.item)) {
       alert('You cannot upload an image before saving the item');
       return false; 
}

问题是在保存完成后this.save（）没有返回，但是立即 - 所以我的图像上传继续（然后在服务器上失败，因为它没有与它关联的Id）。

我可以在保存前移动'isValid'进行检查 - 但如果服务器上的保存失败，则为时已晚。

我是否需要更改保存以返回observable，然后从我的文件上传订阅它？（如果可以的话，你能告诉我一些代码怎么做吗？）或者我是否需要做一些事情来从Observable获取值，然后再从'save'方法返回（如果是这样，你能告诉我一些代码如何做到这一点）？）

我知道还有其他方法可以解决这个问题（无论如何都要上传图片，并在最终保存项目时将其关联起来 - 但我不喜欢这个想法 - 而且我想对此做出相应的回答出于解决这个真正问题的兴趣。）

由于

getIdFromItem从JSON响应中获取插入项目的ID - 认为值得一提。

Answer 1

如果您可以上传或不上传，您可以使用一个标志通知您的其余代码。

服务：

saveItem(item: Item): Observable<number> {
    return this.http
    .post(`${this.baseUrl}/items`, item.createJson(), this.getHeaders())
    .map(this.getIdFromItem)
    .catch(this.handleError);
}

成分：

canUpload: boolean = false;
save(item: Item): void {
    this.canUpload = false;
    this.itemService.saveItem(this.item)
    .subscribe(id => {
        this.item.id = id;
        this.canUpload = true;
    },
    error => {return false;}
    )
}

upload(): boolean {
    if (!this.canUpload) {
       console.log('You cannot upload an image before saving the item');
       return false; 
    }
    this.canUpload = false;
    console.log('You can upload now');
    // ...
}

如何在继续之前处理Angular 2 http更新

1 个答案: