需求：新增子项目时自动将ID关联至选中项目的subProjectIds列表

我来帮你搞定这个子项目关联需求！咱们一步步调整代码就能实现：

1. 先修正选中项目的存储逻辑 #

目前你的getProjectName只保存了项目名称，我们需要存储完整的选中项目对象，这样才能后续更新它的subProjectIds数组。

首先在组件类里添加一个属性来存储选中的项目：

// 组件类中新增属性
selectedProject: Project | null = null;

然后修改getProjectName方法：

getProjectName(project: Project) { 
  this.selectedProject = project; // 保存完整的项目对象
  this.project = project.name; // 保留原有的显示逻辑
  console.log('选中的项目详情:', project); 
}

2. 修改子项目保存逻辑，添加关联关系 #

在save方法里，我们需要在创建子项目后，把新子项目的ID追加到选中主项目的subProjectIds数组中，同时更新主项目的存储：

save() { 
  // 先做校验：没有输入子项目名称或未选中主项目时直接返回
  if (this.newSubProjectName.length === 0 || !this.selectedProject) {
    return;
  }

  this.working = true; 
  const newSubProject: SubProject = emptySubProject(); 
  newSubProject.name = this.newSubProjectName; 
  newSubProject.id = Math.random().toString(36).substr(1, 2); 
  newSubProject.color = this.newSubProjectColor; 

  // 第一步：保存新子项目到store
  this.store.dispatch(new UpsertSubProjectInternalAction(newSubProject)); 

  // 第二步：创建更新后的主项目对象，追加新子项目ID
  const updatedProject: Project = {
    ...this.selectedProject, // 复制原项目的所有属性
    subProjectIds: [...this.selectedProject.subProjectIds, newSubProject.id] // 新增子项目ID到数组
  };

  // 第三步：分发更新主项目的action（请确保你有对应的UpsertProjectInternalAction及reducer逻辑）
  this.store.dispatch(new UpsertProjectInternalAction(updatedProject)); 

  // 重置输入状态
  this.newSubProjectName = ''; 
  this.working = false; // 结束加载状态
}

额外的优化建议 #

• ID生成可靠性：生产环境中不建议用Math.random()生成ID，容易出现重复，推荐使用uuid这类专门的ID生成库。
• 用户体验优化：如果未选中主项目就点击保存，可以添加提示（比如弹窗或页面文字提示），引导用户先选择主项目。
• Store逻辑校验：确保你的reducer能正确处理UpsertProjectInternalAction，根据ID找到对应的主项目并更新subProjectIds数组。

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