Angular 5：点赞操作后如何忽略Observable中视频链接属性的更新？

你的核心问题是每次点赞/取消点赞后都重新获取了全部视频数据，导致整个列表重新渲染，iframe也随之刷新。我们只需要直接更新当前视频的点赞状态和数量，而不需要重新加载所有视频，这样就能避免不必要的视图重渲染，提升用户体验。

步骤1：调整LikeService，让接口返回更新后的点赞数据 #

首先确保你的后端接口在执行点赞/取消点赞操作后，返回该视频最新的isLiked状态和likesCount数值。然后修改服务代码，让请求返回这些关键数据：

// like.service.ts
setLike(iid, video_id) {
  const uri = 'http://localhost:4000/likes/set';
  const obj = { iid: iid, competition_id: video_id };
  return this.http.post(uri, obj)
    .map(res => res); // 返回后端返回的更新数据，比如{isLiked: true, likesCount: 5}
}

revokeLike(iid, video_id) {
  const uri = 'http://localhost:4000/likes/revoke';
  const obj = { iid: iid, competition_id: video_id };
  return this.http.post(uri, obj)
    .map(res => res); // 同样返回更新后的数据
}

步骤2：修改组件中的点赞方法，直接更新本地视频数据 #

不再调用getVideos()重新加载全部视频，而是在当前videos数组中找到目标视频，直接更新它的属性：

// index.component.ts
setLike(iid, video_id) {
  this.likeservice.setLike(iid, video_id).subscribe(updatedData => {
    // 在videos数组中找到对应的视频
    const targetVideo = this.videos.find(video => video.id === video_id);
    if (targetVideo) {
      // 更新点赞状态和数量
      targetVideo.isLiked = updatedData.isLiked;
      targetVideo.likesCount = updatedData.likesCount;
    }
  });
}

revokeLike(iid, video_id) {
  this.likeservice.revokeLike(iid, video_id).subscribe(updatedData => {
    const targetVideo = this.videos.find(video => video.id === video_id);
    if (targetVideo) {
      targetVideo.isLiked = updatedData.isLiked;
      targetVideo.likesCount = updatedData.likesCount;
    }
  });
}

步骤3：修复模板中的变量错误 #

注意你的模板里有个变量误用：competition.likesCount应该改为video.likesCount，因为循环的是video of videos：

<!-- index.component.html -->
<span>{{ video.likesCount }} Likes</span>

为什么这样有效？ #

Angular的变更检测机制会监控数组中对象的属性变化。当你直接修改targetVideo的isLiked和likesCount时，Angular会自动更新对应的按钮显示（颜色、图标状态）以及点赞数，而不会重新渲染整个mat-card——这就意味着iframe不会被重新加载，用户可以继续观看视频，不会被打断。

备选方案：如果后端不返回更新数据 #

如果你的后端接口暂时无法返回更新后的点赞数据，也可以直接在前端本地更新（注意：这种方式在多用户同时操作的场景下可能会出现数据不一致，建议优先让后端返回最新数据）：

setLike(iid, video_id) {
  this.likeservice.setLike(iid, video_id).subscribe(() => {
    const targetVideo = this.videos.find(video => video.id === video_id);
    if (targetVideo) {
      targetVideo.isLiked = true;
      targetVideo.likesCount += 1;
    }
  });
}

revokeLike(iid, video_id) {
  this.likeservice.revokeLike(iid, video_id).subscribe(() => {
    const targetVideo = this.videos.find(video => video.id === video_id);
    if (targetVideo) {
      targetVideo.isLiked = false;
      targetVideo.likesCount -= 1;
    }
  });
}

内容的提问来源于stack exchange，提问作者Mahmood Kohansal