Angular子任务编辑功能异常：未保存更新与图标显示错误

问题描述 #

• 问题1：点击子任务的Edit按钮修改内容后，未点击Save按钮，仅点击Create/Update按钮就会自动更新子任务，不符合需显式保存的预期行为。
• 问题2：修改子任务但未保存，更新任务后重新打开任务对话框，显示的是保存图标而非编辑图标，正确行为应为无未保存修改时显示编辑图标。

复现步骤 #

问题1复现步骤 #

1. 点击子任务的Edit按钮
2. 修改子任务内容，不点击Save按钮
3. 点击Create/Update按钮
4. 观察到子任务已更新，但未触发Save操作

问题2复现步骤 #

1. 修改子任务内容，不保存
2. 更新任务，不保存子任务
3. 重新打开任务对话框
4. 发现显示保存图标而非编辑图标

问题根源分析 #

1. 问题1：模板中直接通过[(ngModel)]绑定子任务的description属性，修改时直接修改了原数组中的对象；Create/Update按钮提交时直接使用了this.subtasks数组，导致未保存的修改被直接提交。
2. 问题2：打开对话框时直接引用了原任务的子任务数组（未做拷贝），且关闭对话框时未重置子任务的isEditable状态，重新打开时isEditable仍为true，因此显示保存图标。

解决方案建议 #

修复问题1：实现子任务的显式保存逻辑 #

1. 组件代码修改（task-form.component.ts）

添加临时存储编辑副本的变量，确保仅在点击Save时才更新原数组：

export class TaskFormComponent {
  // 新增：存储正在编辑的子任务副本
  editingSubtaskCopies: { [index: number]: Subtask } = {};

  // 修改editSubtask方法，保存原始副本
  public editSubtask(index: number) {
    this.editingSubtaskCopies[index] = { ...this.subtasks[index] };
    this.subtasks[index].isEditable = true;
  }

  // 修改saveSubtask方法，仅在保存时更新原对象
  public saveSubtask(index: number) {
    if (this.editingSubtaskCopies[index]) {
      // 用副本覆盖原对象，并重置编辑状态
      this.subtasks[index] = {
        ...this.editingSubtaskCopies[index],
        description: this.subtasks[index].description,
        isEditable: false
      };
      delete this.editingSubtaskCopies[index];
    }
  }

  // 可选：添加取消编辑的方法，恢复原始值
  public cancelEdit(index: number) {
    if (this.editingSubtaskCopies[index]) {
      this.subtasks[index] = this.editingSubtaskCopies[index];
      delete this.editingSubtaskCopies[index];
    }
  }
}

2. 模板修改（task-form.component.html）

调整输入框绑定逻辑，确保编辑时修改的是临时副本（可选优化，进一步隔离原对象）：

<input
  [(ngModel)]="subtask.description"
  type="text"
  name="subtask"
  [readonly]="!subtask.isEditable"
  [ngClass]="{
    editable: subtask.isEditable,
    'read-only': !subtask.isEditable
  }"
/>
<!-- 可选：添加取消按钮 -->
@if(subtask.isEditable) {
<mat-icon color="primary" (click)="cancelEdit($index)">close</mat-icon>
}

修复问题2：重置子任务的编辑状态 #

1. 初始化时深拷贝子任务并重置状态（task-form.component.ts）

避免直接引用原任务的子任务数组，确保每次打开对话框时子任务状态干净：

ngOnInit() {
  this.fromPopup = !!this.data?.fromPopup;

  this.taskForm = this.fb.group({
    id: this.data?.task?.id,
    title: new FormControl(''),
    subtasks: new FormControl(''),
  });

  if (this.data?.task) {
    this.taskForm.patchValue({
      id: this.data.task?.id,
      title: this.data.task.title,
    });
    // 深拷贝子任务并强制重置isEditable为false
    this.subtasks = this.data.task.subtasks.map(subtask => ({
      ...subtask,
      isEditable: false
    }));
  }
}

2. 提交任务时重置所有子任务状态（task-form.component.ts）

确保传递出去的任务对象不带有编辑状态：

public onUpdateTask() {
  // 重置所有子任务的编辑状态
  this.subtasks.forEach(subtask => {
    subtask.isEditable = false;
  });
  
  const taskRawValue = {
    ...this.taskForm.getRawValue(),
    subtasks: this.subtasks,
  };
  if (this.fromPopup) {
    this.dialogRef.close(taskRawValue);
  }
}

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