My Angular2 app is written in TypeScript. I encounter an issue when making a HTTP Post request to create a new record, as the return value from the service does not come back in time to update the DOM with the newly created record. Is there a way to pause processing until the response returns, or to detect changes in my array so I can update the DOM accordingly?
The method in my service looks like this:
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);
}
And here is how I handle it in my component method:
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;
}
Once this.addedComment has been updated with the return value, I want to add it to the this.comments array. Then, I toggle the this.addNewComment flag between displaying input and display fields on the frontend.
Any suggestions are welcome!
EDIT
Here’s the relevant section of my template for handling comments using PrimeNG components:
<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>