ループでネストされたオブザーバブル

Question

ネストされたオブザーバブルを作成して、タグに関連する1つのコンテンツを保存したいとします。最初にコンテンツを保存し、コンテンツIDを返すことで、コンテンツIDを持つタグを外部キーとして保存するようになりました。 （バックエンドログ実行pararelは）どのように私は1つ

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が1つの保存が完了するのを待つように管理できますか？私はそれが再帰的な方法を使用してしまうだろう

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が動作を終了し、現在の1いったん開始します。しかし、私はそれを知っていないいくつかの気の利いたrxjsオペレータがあるかもしれません

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 => { }, 
    () => {}); 
    } 
} 

：

Answer 2

はこのような何かを試してみてください。

また、デザインを少し変更することもできます。特定のカテゴリのすべてのタグをバックエンドのエンドポイントに送信し、そこでタグを保存することができます。あなたはそれらをどのように保存したいのかを完全に制御するでしょう。