如何将编辑后的值保存到原索引而非新索引？Angular开发问题

你的代码存在三个核心问题导致编辑保存失效、编辑模式异常：

1. saveCommand函数逻辑顺序错误，且修改数组的方式错误（删除原元素后追加到末尾，而非修改原索引）
2. HTML中双向绑定的是字符串迭代变量（值类型），无法直接同步到数组
3. 验证失败时未保留编辑状态，导致编辑模式异常

修正后的TypeScript代码 #

editClick = (command: string, index: number) => {
  this.logger.trace('editClick() called with command', command);
  this.editingIndex = index;
  this.logger.trace('editClick() called with this.editingIndex', this.editingIndex);
  this.flipVtCommandSelected(command);
  this.logger.trace('editClick() returning');
};

saveCommand = (command: string, index: number) => {
  this.logger.trace('saveCommand() called with command, index', command, index);

  // 1. 先做输入空值验证
  const trimmedCommand = command.trim();
  if (!trimmedCommand) {
    this.showAddVtuCommandErrorMessage();
    this.logger.trace('command is not valid, saveCommand() returning');
    return; // 验证失败，保留编辑状态
  }

  // 2. 验证重复时排除当前编辑的索引（避免和自身对比报错）
  const isDuplicate = this.selectedVtuCommands.some((cmd, idx) => {
    return idx !== index && cmd.trim() === trimmedCommand;
  });
  if (isDuplicate) {
    this.showAlreadyPresentVtuCommandErrorMessage();
    this.logger.trace('command is already present, saveCommand() returning');
    return; // 验证失败，保留编辑状态
  }

  // 3. 直接修改原索引的元素
  this.selectedVtuCommands[index] = trimmedCommand;
  this.logger.trace('command updated at index', index, this.selectedVtuCommands);

  // 4. 验证通过后才关闭编辑模式
  this.editingIndex = -1;
  this.logger.trace('saveCommand() returning');
}

TS代码修改说明： #

• 调整逻辑顺序：先完成所有验证，验证通过后再修改数组、关闭编辑模式
• 修复数组修改方式：用this.selectedVtuCommands[index] = trimmedCommand直接替换原索引元素，而非删除后追加
• 优化重复验证：用some替代forEach（forEach里的return无法终止循环），同时排除当前编辑的索引，避免编辑相同内容时误判重复
• 保留编辑状态：验证失败时不设置editingIndex = -1，让用户可以继续修改

修正后的HTML代码 #

<div id="vtu-command-div">  
  <ul>
    <li *ngFor="let command of selectedVtuCommands; let commandIndex = index" class="list-group-item">                               
      <div *ngIf="editingIndex !== commandIndex; else editingTemplate" class="mt-2 d-inline-block">
        {{ command }}
      </div>
      <ng-template #editingTemplate>
        <div id="inputdiv">
          <!-- 直接绑定数组的对应索引元素，而非迭代变量 -->
          <textarea id="textareadiv" class="mt-2 d-inline-block" [(ngModel)]="selectedVtuCommands[commandIndex]"></textarea>
          <button id="text-area-button-div" class="btn btn-secondary pull-right" (click)="saveCommand(selectedVtuCommands[commandIndex], commandIndex)">
            <i class="fa fa-save"></i>
          </button>
        </div>
      </ng-template>

      <button *ngIf="editingIndex !== commandIndex" (click)="deleteVtuCommand(command)" class="btn btn-secondary pull-right ml-2">
        <i class="fa fa-trash"></i>
      </button>

      <button *ngIf="editingIndex !== commandIndex" class="btn btn-secondary pull-right" (click)="editClick(command, commandIndex)">
        <i class="fa fa-pencil" aria-hidden="true"></i>
      </button>
    </li>
  </ul>
</div>

HTML代码修改说明： #

• 修正双向绑定目标：将[(ngModel)]="command"改为[(ngModel)]="selectedVtuCommands[commandIndex]"，直接操作数组元素（引用类型），确保输入内容实时同步到数组
• 简化模板判断：删除editingTemplate内重复的*ngIf="editingIndex === commandIndex"，因为模板本身就是在editingIndex === commandIndex时才显示
• 修复标签结构：补充了缺失的<ul>标签（原代码里只有<li>没有父级<ul>）

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