Angular中批量更新Input模型字段，规避逐个映射及组件关闭问题

问题根源 #

直接执行this.zoneModel = this.zoneModelModified会替换zoneModel的引用——因为@Input是父组件传递的对象引用，替换后子组件内的zoneModel和父组件绑定的原对象不再指向同一内存地址。后续设置this.zoneModel.saisieZone = false时，修改的是新对象的属性，父组件和视图绑定的旧对象未更新，导致编辑组件无法关闭。

优化方案 #

方案1：保留原引用，合并修改字段（推荐）

通过Object.assign或扩展运算符，将zoneModelModified的字段合并到原zoneModel对象中，保持原引用不变，这样后续修改saisieZone能同步到视图：

onConfirm() {
  // 浅拷贝合并：适合非嵌套对象
  Object.assign(this.zoneModel, this.zoneModelModified);
  
  // 如果是嵌套结构，用深合并（可自行实现或用lodash.merge）
  // import merge from 'lodash/merge';
  // merge(this.zoneModel, this.zoneModelModified);

  // 关闭编辑状态
  this.zoneModel.saisieZone = false;
}

如果是数组类型的Zone列表，需要遍历逐个合并：

onConfirm() {
  this.zoneModel.forEach((originalZone, index) => {
    const modifiedZone = this.zoneModelModified[index];
    if (modifiedZone) {
      Object.assign(originalZone, modifiedZone);
      originalZone.saisieZone = false;
    }
  });
}

方案2：拆分编辑状态与数据模型

将控制编辑显示的saisieZone从数据模型中剥离，单独维护编辑状态集合，避免数据修改影响状态控制：

// 组件内单独维护编辑中的Zone ID集合
editingZoneIds: number[] = [];

// 点击编辑时记录ID
openEditZone(zoneId: number) {
  if (!this.editingZoneIds.includes(zoneId)) {
    this.editingZoneIds.push(zoneId);
  }
}

// 确认编辑时合并数据并移除编辑状态
onConfirm(zoneId: number) {
  // 找到对应的数据项合并字段
  const originalZone = this.zoneModel.find(z => z.id === zoneId);
  const modifiedZone = this.zoneModelModified.find(z => z.id === zoneId);
  if (originalZone && modifiedZone) {
    Object.assign(originalZone, modifiedZone);
  }
  // 移除编辑状态
  this.editingZoneIds = this.editingZoneIds.filter(id => id !== zoneId);
}

模板中通过editingZoneIds判断是否显示编辑组件：

<tr *ngFor="let zone of zoneModel">
  <td>{{ zone.name }}</td>
  <!-- 编辑按钮 -->
  <td><button (click)="openEditZone(zone.id)">编辑</button></td>
</tr>
<!-- 编辑组件：根据ID判断显示 -->
<app-saisie-zone 
  *ngFor="let zoneId of editingZoneIds"
  [zone]="zoneModel.find(z => z.id === zoneId)"
  (confirm)="onConfirm(zoneId)"
></app-saisie-zone>

方案3：使用NgOnChanges监听输入变化（适合不可变数据场景）

如果项目遵循不可变数据模式，每次修改生成新对象，可在组件中通过ngOnChanges监听@Input的变化，同步本地状态：

import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';

@Component({...})
export class ZoneModalComponent implements OnChanges {
  @Input() zoneModel: Zone[];
  zoneModelModified: Zone[] = [];

  ngOnChanges(changes: SimpleChanges) {
    if (changes['zoneModel']) {
      // 深拷贝输入数据到修改副本，避免直接修改原对象
      this.zoneModelModified = JSON.parse(JSON.stringify(this.zoneModel));
    }
  }

  onConfirm() {
    // 通知父组件更新数据（通过@Output）
    this.updateZoneModel.emit(this.zoneModelModified);
    // 关闭编辑状态（此时父组件更新后，ngOnChanges会同步本地状态）
  }
}

父组件接收更新并替换原数据：

<zone-modal 
  [zoneModel]="parentZoneModel"
  (updateZoneModel)="parentZoneModel = $event"
></zone-modal>

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