Data only displayed after refresh

Question

I am creating comments section in my app, when a user enter a comments and submit, comment should imeaditely be displayed in front end, unfortunately now comments are only v

Answer 1

@Kaczkapojebana. When we subscribe to a "get", DON'T mean that a change in the dbs was displayed in the view. (only say that when the asyncronous called is completed, the data is showed). I usually refered to "get" subscription as "subscription of only one use".

You must add manually to this.comments the new data. where? IN subscribe function:

addReview(author, description) { 
    this.moviesService.addReview(author, description).subscribe(success => {  
      /***add manually to this.comments***********/
      this.comments.push({author:author,descripcion:description});

      this.flashMessages.show('You are data we succesfully submitted', { cssClass: 'alert-success', timeout: 3000 });
    }, error => {
      this.flashMessages.show('Something went wrong', { cssClass: 'alert-danger', timeout: 3000 });
    });
  }

NOTE: You can also subscribe again to get all the data or that the addReview response all the data NOTE2: Equally, when you make an update, you must update the "this.comments" array manually

Answer 2

You have to call your getComments method in the callback of you submit comments. Your code only has a "get" call in ngOnInit method of the component. So when you refresh your view, the ngOnInit executes again and thus getComments is called.

You have to make a get call in the callback of your submit comments method.

EDIT#1:

addReview(author, description) {
    this.moviesService.addReview(author, description).subscribe(success => {
        this.flashMessages.show('You are data we succesfully submitted', { cssClass: 'alert-success', timeout: 3000 });
        // get the id
        this.moviesService.getComments(id).subscribe(comments => {
            console.log(comments);
            this.comments = comments;
        });
    }, error => {
        this.flashMessages.show('Something went wrong', { cssClass: 'alert-danger', timeout: 3000 });
    });
}