如何在Angular Firebase集合的数据字段中实现数组的增删改？拦截重复添加收藏电影及删除功能需求

当然可以在Angular Firebase的集合字段里插入、更新和删除数组！针对你遇到的重复添加电影和移除指定电影的需求，我给你整理了实用的实现方案：

一、阻止重复添加电影 #

你当前的代码直接用push()会导致同一电影被多次添加，这里有两种解决思路：

思路1：前端先判断再添加（适合简单场景） #

在push之前，先检查用户的收藏列表里是否已经存在该电影：

// 组件中的添加电影函数
addMovieToList() {
  // 检查当前电影是否已在收藏列表中
  const isMovieAlreadyAdded = this.userData.list.some(item => item.movie_id === this.movie_detail.id);
  
  if (!isMovieAlreadyAdded) {
    // 不存在则添加
    this.userData.list.push({ movie_id: this.movie_detail.id });
    const updateData = {
      id: this.userData.uid,
      password: this.userData.password,
      phone: this.userData.phone,
      role: this.userData.role,
      list: this.userData.list
    };
    this.authService.updateUser(updateData);
  } else {
    // 可以提示用户“该电影已在收藏列表中”
    console.log('电影已收藏');
  }
}

思路2：用Firebase原子操作arrayUnion（推荐） #

Firestore提供了arrayUnion方法，它会自动判断元素是否已存在，只添加不存在的元素，而且是原子操作（避免多用户并发操作时的冲突）：

首先在服务中新增添加电影的方法：

// auth.service.ts中新增方法
import { arrayUnion } from "firebase/firestore";

addMovieToFavorites(userId: string, movie: { movie_id: number }) {
  const userDocRef = doc(this.firestore, `users/${userId}`);
  return updateDoc(userDocRef, {
    list: arrayUnion(movie)
  });
}

然后在组件中调用这个方法：

// 组件中的添加函数
addMovieToList() {
  this.authService.addMovieToFavorites(this.userData.uid, { movie_id: this.movie_detail.id })
    .then(() => {
      console.log('电影添加成功');
      // 可以更新本地的userData.list，或者重新获取用户数据
      this.userData.list.push({ movie_id: this.movie_detail.id });
    })
    .catch(err => {
      console.error('添加失败', err);
    });
}

二、实现移除指定电影的功能 #

同样推荐用Firebase的arrayRemove原子操作，它会精准移除数组中匹配的元素：

步骤1：在服务中新增移除电影的方法 #

// auth.service.ts中新增方法
import { arrayRemove } from "firebase/firestore";

removeMovieFromFavorites(userId: string, movie: { movie_id: number }) {
  const userDocRef = doc(this.firestore, `users/${userId}`);
  return updateDoc(userDocRef, {
    list: arrayRemove(movie)
  });
}

步骤2：在组件中调用移除方法 #

// 组件中的移除函数，接收要删除的movie_id
removeMovie(movieId: number) {
  this.authService.removeMovieFromFavorites(this.userData.uid, { movie_id: movieId })
    .then(() => {
      console.log('电影移除成功');
      // 更新本地列表，过滤掉被删除的电影
      this.userData.list = this.userData.list.filter(item => item.movie_id !== movieId);
    })
    .catch(err => {
      console.error('移除失败', err);
    });
}

注意事项 #

使用arrayUnion和arrayRemove时，需要确保传入的对象与数组中存储的对象完全匹配（比如如果你的列表项只有movie_id字段，那传入{ movie_id: xxx }就可以；如果有其他字段，要保证所有字段都一致才能匹配成功）。

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