Angular与Nest中的软删除实现：含恢复及永久删除功能

1. 数据结构设计 #

核心是维护两个数据集合：

• ingredients：存储当前正常展示的食材列表，每个元素为包含唯一标识（如id）和食材信息（如name）的对象
• deletedIngredients：存储已被删除的食材列表，结构与ingredients一致

示例数据结构：

// 单个食材对象
{
  id: 1,
  name: "番茄"
}

// 初始状态
const ingredients = [{id:1, name:"番茄"}, {id:2, name:"鸡蛋"}];
const deletedIngredients = [];

2. 核心功能实现 #

从食材列表转移到已删除区

点击食材项的删除按钮时，执行以下操作：

1. 根据id找到目标食材
2. 从ingredients数组中移除该食材
3. 将该食材添加到deletedIngredients数组
4. 重新渲染两个区域的UI

示例代码（原生JS）：

function moveToDeleted(targetId) {
  // 找到目标食材
  const targetItem = ingredients.find(item => item.id === targetId);
  // 更新正常列表：过滤掉目标项
  ingredients = ingredients.filter(item => item.id !== targetId);
  // 更新已删除列表：添加目标项
  deletedIngredients.push(targetItem);
  // 重新渲染UI
  renderIngredientsList();
  renderDeletedList();
}

从已删除区恢复到食材列表

点击已删除项的恢复按钮时，逻辑与删除转移相反：

1. 根据id找到目标食材
2. 从deletedIngredients数组中移除该食材
3. 将该食材添加回ingredients数组
4. 重新渲染UI

示例代码：

function restoreIngredient(targetId) {
  const targetItem = deletedIngredients.find(item => item.id === targetId);
  deletedIngredients = deletedIngredients.filter(item => item.id !== targetId);
  ingredients.push(targetItem);
  renderIngredientsList();
  renderDeletedList();
}

永久删除已删除项

点击永久删除按钮时，直接从deletedIngredients数组中移除目标食材，无需转移：

function permanentlyDelete(targetId) {
  deletedIngredients = deletedIngredients.filter(item => item.id !== targetId);
  renderDeletedList();
}

3. UI渲染逻辑 #

• 食材列表区：遍历ingredients数组，为每个食材渲染名称和删除按钮，按钮绑定moveToDeleted方法并传入当前食材的id
• 已删除项区：遍历deletedIngredients数组，为每个食材渲染名称、恢复按钮（绑定restoreIngredient）和永久删除按钮（绑定permanentlyDelete）

4. 额外优化建议 #

• 唯一ID生成：使用Date.now()或UUID生成每个食材的唯一id，避免操作时出现冲突
• 状态持久化：通过localStorage保存两个数组的状态，刷新页面后数据不会丢失

  // 初始化时从本地读取
  const ingredients = JSON.parse(localStorage.getItem('ingredients')) || [];
  const deletedIngredients = JSON.parse(localStorage.getItem('deletedIngredients')) || [];
  
  // 更新数组后同步保存到本地
  function saveToLocalStorage() {
    localStorage.setItem('ingredients', JSON.stringify(ingredients));
    localStorage.setItem('deletedIngredients', JSON.stringify(deletedIngredients));
  }
  

• 空状态提示：当某个列表为空时，显示友好提示（如“暂无食材”、“暂无已删除项”）提升用户体验

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