Обновить значение значения объекта внутри * ngFor

Question

У меня есть этот массив объектов, который содержит кучу комментариев:

  comments: Comment[];

И этот массив заполняется внутри функции ngOnInit() путем вызова сервисного кода. Позже, в моем массиве comments есть ключ, равный commentPlus среди других ключей. Это значение представляет общее количество голосов за комментарий. Я использую его значение внутри моего html следующим образом:

<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>

Я хочу обновлять значение {{comment.commentPlus}} и стиль кнопки всякий раз, когда пользователь нажимает кнопку. Ниже приведен код для 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();
}

Но проблема в том, что ни изменение стиля, которое должно быть выполнено с помощью [ngClass]="{'active' : comment.voted > 0 }", ни новое значение для {{comment.commentPlus}} не отражаются во внешнем интерфейсе. Серверная часть работает так, как и должно быть, но эти два изменения требуют обновления страницы.

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

Answer 1

ну, вы должны обновить модель после ответа сервера.

изменить html на

<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>

, затем

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

и все готово .

Answer 2

Я не вижу, где обновляется ваш массив comments.

Вы можете сделать 2 вещи:

1. Обновить массив comments новыми значения для комментария, который вы только что обновили, внутри this.service.upVote обратного вызова успеха подписки.

2. У вас есть Rx js Subject внутри вашего сервиса. Подпишитесь на эту тему внутри OnInit вашего компонента и внутри его успешного обратного вызова обновите массив comments. Передайте новое значение для этого субъекта изнутри this.service.upVote обратный вызов успеха подписки.