Update a value of object value inside *ngFor

Question

I have this array of objects which holds bunch of comments:

  comments: Comment[];

And this array is filled up inside ngOnInit() function by invoking service code. Later on, there is a key in my comments array which is commentPlus among with other keys. This value represents the total upvotes for a comment. I use its value inside my html like this:

<div class="media mb-3" *ngFor="let comment of comments; trackBy: trackByFn">...
<a class="btn btn-success" (click)="upVote()" [ngClass]="{'active' : comment.voted > 0 }"><i class="fa fa-thumbs-up"></i> {{comment.commentPlus}}</a>

What I want is to update the value {{comment.commentPlus}} and style of the button whenever user hits the button. Below is the code for upVote() function

upVote(commentId: number, userId: number){
    userId = this.userId;
    commentId = 4;    //I just assigned some number that I know it exists in my database for testing.
    this.service.upVote(commentId, userId).subscribe();
}

But the problem is that neither style change that should be performed by [ngClass]="{'active' : comment.voted > 0 }" nor new value for {{comment.commentPlus}} reflects in front end. Backend is working as it should be, but these two changes require page to be refreshed.

export class Yorum {
  commentId?: number;
  userId?: number;
  comment?: string;
  commentPlus?: number;
  commentMinus?: number;
  voted?: number;
}

Can you recreate in a stackblitz?

Kurt Hamilton
– Kurt Hamilton

2020-03-08 14:13:39 +00:00
Commented Mar 8, 2020 at 14:13 — Kurt Hamilton
– Kurt Hamilton, Commented Mar 8, 2020 at 14:13

Tahmasb · Accepted Answer · 2020-03-08 23:26:33Z

1

well you should update you'r model after server response

change you'r html to

<div class="media mb-3" *ngFor="let comment of comments; trackBy: trackByFn">...
<a class="btn btn-success" (click)="upVote(comment)" [ngClass]="{'active' : comment.voted > 0 
}"><i class="fa fa-thumbs-up"></i> {{comment.commentPlus}}</a>

then

upVote(comment){
    userId = this.userId;
    commentId = 4;    //I suggest =====> commentId = comment.id
    this.service.upVote(commentId, userId).subscribe(
      data=>{
         if(data){ //it depend's on you'r server response :)
           comment.voted = 1 ; //for example 
           comment.commentPlus = 1 ; 
         }
      },
      error=>{
        console.log(error);
      }
    );
}

and it's done.

edited Mar 8, 2020 at 23:26

answered Mar 8, 2020 at 16:33

Tahmasb

697 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

zodiac645 Over a year ago

how could I pass comment parameter to upVote() function? Its signature is upVote(commentId: number, userId: number)

Tahmasb Over a year ago

of course you'r comment has id , so you can use comment.id inside you'r service instead of commentId

Jatinder Pal Singh · Accepted Answer · 2020-03-08 14:37:11Z

0

I don't see where your comments array is being updated.

You could do 2 things:

Update your comments array with new values for the comment that you just updated, inside this.service.upVote subscribe's success callback.
Have an Rxjs Subject inside your service. Subscribe to this Subject inside your component's OnInit and inside it's success callback update your comments array. Broadcast new value on this Subject from inside this.service.upVote subscribe's success callback.

answered Mar 8, 2020 at 14:37

Jatinder Pal Singh

2362 silver badges11 bronze badges

2 Comments

zodiac645 Over a year ago

Actually I ve tried your first suggestion but I think I made something wrong. I ve tried to filter comments array based on commentId that is updated but it gave me nothing. Like this: this.comments.filter('commentId': commentId )[0].commentPlus++;

Jatinder Pal Singh Over a year ago

try this and build on to that: this.comments.map((comment) => { if (comment.commentId === 2) { comment.commentId = 4; } });

Collectives™ on Stack Overflow

Update a value of object value inside *ngFor

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related