如何实现电影收藏列表按钮的添加/移除功能切换？

核心结论：必须后端+数据库配合，不能仅前端处理 #

收藏状态是用户的持久化数据，只在前端处理的话，刷新页面或换设备就会丢失状态。数据库不需要单独给电影表加布尔字段，推荐用多对多关联表（比如user_watchlist）存储用户ID和电影ID的关联记录——这种方式更灵活，同一部电影可以被多个用户收藏，还不会污染电影本身的数据。

具体实现步骤 #

1. 后端接口准备 #

需要三个核心接口：

• POST /api/watchlist/add：接收用户ID和电影ID，添加收藏关联记录
• DELETE /api/watchlist/remove：接收用户ID和电影ID，删除对应的收藏关联记录
• GET /api/watchlist/user/{userId}：返回该用户收藏的所有电影数据（可复用你现有loadUserWatchlist接口）

2. 前端组件逻辑修改 #

在你现有WatchlistComponent基础上，添加收藏状态管理和切换方法：

@Component({
  selector: 'app-watchlist',
  templateUrl: './watchlist.component.html',
  styleUrls: ['./watchlist.component.css'],
})
export class WatchlistComponent {
  watchlist: IMovie[] | null = [];
  // 用Set存储已收藏的电影ID，快速判断状态
  watchedMovieIds = new Set<number>();

  constructor(private auth: AuthService, private api: ApiService) {
    this.getWatchlist();
  }

  getWatchlist() {
    this.api.loadUserWatchlist().subscribe({
      next: (v) => {
        this.watchlist = v;
        // 把已收藏电影的ID存入Set
        this.watchedMovieIds = new Set(v.map(movie => movie.id));
      },
    });
  }

  // 切换收藏状态的核心方法
  toggleWatchlist(movie: IMovie) {
    const isInWatchlist = this.watchedMovieIds.has(movie.id);
    if (isInWatchlist) {
      // 执行移除收藏逻辑
      this.api.removeFromWatchlist(movie.id).subscribe({
        next: () => {
          this.watchedMovieIds.delete(movie.id);
          // 更新本地收藏列表
          this.watchlist = this.watchlist?.filter(m => m.id !== movie.id) || [];
        }
      });
    } else {
      // 执行添加收藏逻辑
      this.api.addToWatchlist(movie.id).subscribe({
        next: () => {
          this.watchedMovieIds.add(movie.id);
          // 更新本地收藏列表
          if (this.watchlist) this.watchlist.push(movie);
        }
      });
    }
  }
}

3. 模板（HTML）动态渲染按钮 #

在电影列表循环中，根据watchedMovieIds判断状态，动态显示按钮文本并绑定点击事件：

<div *ngFor="let movie of watchlist">
  <!-- 这里放电影名称、海报等展示内容 -->
  <button (click)="toggleWatchlist(movie)">
    {{ watchedMovieIds.has(movie.id) ? '从收藏列表移除' : '添加至收藏列表' }}
  </button>
</div>

4. 补充说明 #

• 如果需要在电影详情页单独判断某部电影是否被收藏，可以新增GET /api/watchlist/check/{userId}/{movieId}接口，返回布尔值供前端判断。
• 接口调用建议添加错误处理逻辑，比如网络失败时给用户弹出提示，提升体验。

内容的提问来源于stack exchange，提问作者Kristian Lalov