可觀察的嵌套循環

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運營商，但是我不知道它。

你也可以改變你的設計一點點。您可以向後端端點發送給定類別的所有標籤，並在那裏處理保存標籤。你將完全控制你想如何保存它們。