Angular2等待HttpPost響應

我在打字稿中有一個angular2應用程序。我正在發出HTTP Post請求以創建記錄。這個帖子請求發生得很好，記錄被保存，但是，我從服務中返回新記錄，我想將它添加到我的組件列表中，並使用新創建的記錄更新DOM。然而，它似乎永遠不會返回，是否有一種可接受的方式來停止處理，直到它返回或檢測到數組中的更改，然後更新DOM？Angular2等待HttpPost響應

我的服務方法如下：

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的標誌，在前端的輸入和顯示字段之間切換以顯示數據。

在此先感謝！

編輯

如這裏要求是我對這些評論模板的相應部分。我用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>

來源

2016-09-27 DaRoGa

就像你注意到：Observables工作異步 - 讓你的.subscribe電話後一切可能獲取.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')); 
}

而且你從你的電話後取回對象不匹配模板。我建議這種變化在您的通話AddComment具有RepackComment這樣的構造：

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); 
}

來源

2016-09-27 08:25:45 rinukkusu

當我執行此操作，我沒有得到任何錯誤在控制檯或任何東西，但是，DOM刷新沒有對象存在，所以它顯示空值 – DaRoGa

但它顯示在控制檯中的消息''添加評論：{...}「'？你的模板是怎樣的？ – rinukkusu

是的，我得到︰'增加評論：[對象對象]'所以我沒有得到一個JSON對象或任何它只是文本'[對象對象]' – DaRoGa

這是我如何處理這樣的問題：

在服務我有看的方法是這樣的：

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只返回一個布爾值。在你的情況下，你可能會存儲到一個局部變量...

來源

2017-11-27 12:57:43

Angular2等待HttpPost響應

回答

相關問題