可观察的嵌套循环

Question

我想创建一个嵌套的可观察性来保存与标记相关的一个内容。首先保存内容并返回内容标识，以便将内容标识作为外键保存，方法与在我的循环中同时发送数据的方式类似。 （后端日志运行pararel）我怎样才能使它等到做下一步要做一个

component.ts

save(){ 
    this.contentService.savecontent(this.content_input) // save content 
    .subscribe(
    data => { this.listContentData = data }, // return data to get content id 
    error => { error = error }, 
    () => { 
     this.savetag(this.listContentData); // save tag 
    }); 
} 

savetag(listcontentdata): void { 
    // listdraftCategories is a list of tag 
    for (var i = 0; i < this.listdraftCategories.length; i++) { 
     this.tagService.savetagwithcontent(this.listdraftCategories[i], listcontentdata) 
      .subscribe(
      data => { data = data }, 
      error => { }, 
      () => { 
      }); 
    } 
} 

service.ts

savecontent(contentObj: any): Observable<any> { 

    contentObj = JSON.parse(contentObj); 

    let body = JSON.stringify(

     { 
      "token": "test", 
      "content": { 
       "contentName": contentObj.itemName // contentId will be autoincrement in backend 
       } 
      } 
     } 
    ); 

    let headers = new Headers({ 'Content-Type': 'application/json' }); 
    let options = new RequestOptions({ headers: headers }); 

    return this.http.post(this.host + this.url_content + this.url_save, body, options) 
     .map(res => this.extractData(res)) 
     .catch(this.handleError); 
} 

savetagwithcontent(tagObj: any, contentObj: any): Observable<any> { 

    console.log("obj", contentObj); 

    let body = JSON.stringify(
     { 
      "token": "test", 
      "content": { 

       "fkTag": { 
        "tagId": tagObj.tagId 
       }, 
       "fkContent": { 
        "contentId": contentObj.responseObject[0].contentId 
       } 

      } 
     } 
    ); 

    let headers = new Headers({ 'Content-Type': 'application/json' }); 
    let options = new RequestOptions({ headers: headers }); 

    return this.http.post(this.host + this.url_tag_has_content + this.url_save, body, options) 
     .map(res => this.extractData(res)) 
     .catch(this.handleError); 
} 

后台日志（保存的内容标签）

--- start save tag with content --- 
--- start save tag with content --- 
--- content id : 1 tag id: 1 --- 
--- content id : 1 tag id: 2 --- 
--- end save tag with content --- 
--- end save tag with content --- 

看起来像它在几乎同时在方法中。我如何设法使savetag等待一个保存完成然后做下一个？

Answer 1

我想它会使用递归方法做的方法：

savetag(listcontentdata:any, index = 0): void { 
    if(index >= this.listdraftCategories.length){ 
     return; 
    } 
    // listdraftCategories is a list of tag 
    this.tagService.savetagwithcontent(this.listdraftCategories[index], listcontentdata) 
     .subscribe(
     data => { 
      data = data; 
      this.savetag(listcontentdata, index +1); 
     }, 
     error => { }, 
     () => { 
     }); 

} 

这样，你的savetag方法的下一次迭代将只启动一次当前的observable完成相应操作。

Answer 2

尝试这样：

const observables = []; 
for (var i = 0; i < this.listdraftCategories.length; i++) { 
    observables.push(this.tagService.savetagwithcontent(this.listdraftCategories[i], listcontentdata)); 
} 

let i = 0; 
let finished = true; 
while(i < observables.length) { 
    if (finished) { 
    finished = false; 
    observables[i].subscribe(
     data => { 
     finished = true; 
     i++; 
     data = data 
     }, 
     error => { }, 
    () => {}); 
    } 
} 

可能有一些漂亮的rxjs运营商，但是我不知道它。

你也可以改变你的设计一点点。您可以向后端端点发送给定类别的所有标签，并在那里处理保存标签。你将完全控制你想如何保存它们。