Angular2 HttpPost応答を待つ

Question

私はtypescriptでangular2アプリを持っています。私はレコードを作成するためにHTTP Postリクエストを作成しています。この投稿要求はうまくいき、レコードは保存されますが、サービスから新しいレコードが返され、コンポーネントのリストに追加して、新しく作成したレコードでDOMを更新します。しかし、それは決して時間内に戻ってこないようです。配列を変更したり、DOMを更新したりするまで、処理を中断する方法はありますか？

次のように私のサービス方法は次のとおりです。

public AddComment = (comment: RepackComment): Observable<RepackComment> => { 
    var json = JSON.stringify({ comment : comment.Comment, rr_id : comment.RepackId, comment_by : comment.CommentBy }); 
    return this.http.post(this.commentUrl + 'Add', json, {headers: this.headers}) 
        .map((response: Response) => <RepackComment>response.json()) 
        .catch(this.handleError); 
} 

そして、これは私のコンポーネントのメソッドです：

saveComment(): void{ 
    console.log(this.newComment); 
    this.repackService.AddComment(this.newComment) 
        .subscribe((data: RepackComment) => this.addedComment = data, 
        error => console.log(error), 
        () => console.log('Finished creating new comment')); 

    console.log("added Comment: " + this.addedComment); 
    this.comments.push(this.addedComment); 
    this.addNewComment = false; 
} 

this.addedCommentは、戻り値が移入されている場合、だから、私はそれを追加したいです配列this.comments。私はthis.addNewCommentと呼ばれるフラグを設定して、フロントエンドの入力フィールドと表示フィールドを切り替えてデータを表示します。

ありがとうございます!!!

EDIT

ここで要求されたように、これらのコメントの私のテンプレートの適切な部分です。私は私のコンポーネントに対してPrimeNGを使用します。あなたのような

<p-dataList [value]="comments" [hidden]="addNewComment"> 
     <header style="height:30px;"> 
      <button pButton type="button" label="Add Comment" (click)="addComment()" class="actionBtn" style="float:left;width:150px;"></button> 
      <span style="margin-left:-105px;font-size:20px;">Comments</span> 
     </header> 
     <template let-comment> 
      <div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px;border-bottom:1px solid #D5D5D5;" > 
       <div class="ui-grid-row"> 
         <div class="ui-grid-col-12"> 
          <div class="ui-grid ui-grid-responsive ui-fluid comment"> 
           <div class="ui-grid-row row-div"> 
            <div class="ui-grid-col-3 labelFor">ID: </div> 
            <div class="ui-grid-col-7 displayFor">{{comment.ID}}</div> 
           </div> 
           <div class="ui-grid-row row-div"> 
            <div class="ui-grid-col-3 labelFor">Comment: </div> 
            <div class="ui-grid-col-7 displayFor">{{comment.Comment}}</div> 
           </div> 
           <div class="ui-grid-row row-div"> 
            <div class="ui-grid-col-3 labelFor">Author: </div> 
            <div class="ui-grid-col-7 displayFor">{{comment.CommentBy}}</div> 
           </div> 
          </div> 
         </div> 
        </div> 
        </div> 
       </template> 
      </p-dataList> 
/*INPUT COMPONENTS*/ 
      <div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px;border-bottom:1px solid #D5D5D5;" [hidden]="!addNewComment"> 
         <div class="ui-grid-row"> 
          <div class="ui-grid-col-12"> 
           <div class="ui-grid ui-grid-responsive ui-fluid comment"> 
            <div class="ui-grid-row row-div"> 
             <div class="ui-grid-col-3 labelFor">Comment: </div> 
             <input type="text" pInputText [(ngModel)]="newComment.Comment" class="displayFor"/> 
            </div> 
            <div class="ui-grid-row row-div"> 
             <div class="ui-grid-col-3 labelFor">Author: </div> 
             <input type="text" pInputText [(ngModel)]="newComment.CommentBy" class="displayFor"/> 
            </div> 
           </div> 
          </div> 
         </div> 
         <br/> 
         <div class="div-row" style="margin-left:40%;"> 
          <button pButton type="button" label="Cancel" (click)="cancelComment()" class="actionBtn" style="width:150px;"></button> 
          <button pButton type="button" label="Save" (click)="saveComment()" class="actionBtn" style="width:150px;"></button> 
         </div> 
        </div> 

Answer 1

は気づい：Observables仕事非同期 - ので、あなたの.subscribeコール後のすべては、おそらく.subscribeコールバック内のコードの前に呼び出されます。

saveComment(): void{ 
    console.log(this.newComment); 
    this.repackService.AddComment(this.newComment) 
        .subscribe((data: RepackComment) => { 
         this.addedComment = data; 

         // add your code here 
         console.log("added Comment: " + this.addedComment); 
         this.comments.push(this.addedComment); 
         this.addNewComment = false; 
        }, 
        error => console.log(error), 
        () => console.log('Finished creating new comment')); 
} 

をまた、あなたが戻ってあなたのポストの呼び出しから取得したオブジェクトは、あなたと一致しません、あなたはそのコールバックへsubscribe呼び出しの結果に依存したコードを、置く必要があることを修正するには

テンプレート。私はこのような方法を探しているサービスで

：：私はこの種の問題を処理する方法これは

public AddComment = (comment: RepackComment): Observable<RepackComment> => { 
    var json = JSON.stringify({ comment : comment.Comment, rr_id : comment.RepackId, comment_by : comment.CommentBy }); 
    return this.http.post(this.commentUrl + 'Add', json, {headers: this.headers}) 
        .map((response: Response) => response.json()) 
        .map(res => new RepackComment(res.id, res.comment, res.comment_by)) 
        .catch(this.handleError); 
} 

Answer 2

：私はRepackCommentは、このようなコンストラクタを持ってあなたのAddComment呼び出しでこの変更を提案したい

を

checkIsLoggedIn() { 
     return this._http.get(this.hostURI.adress+'/account',options) 
     .map(res => res.json()); 

    } 

そして私はこのように私のコンポーネントにメソッドを呼び出します。

return this._accountService.checkIsLoggedIn() 
     .map(res => { 
       return res ? true : false 
      } 
     ); 

私の場合、私はAPIを返すだけのブール値です。あなたのケースでは、ローカル変数に格納することがあります...