Question

我在打字稿中有一个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的标志，在前端的输入和显示字段之间切换以显示数据。

提前致谢!!!

修改

根据我的要求，这是我的模板中适用于这些评论的部分。我使用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回调中的代码之前被调用。

要解决此问题，您需要将取决于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);
}

Angular2等待HttpPost响应

1 个答案: