通过ngModel修改对象属性时Setter未触发，求排查原因

这是个非常典型的Angular getter/setter使用误区，我来帮你理清楚问题出在哪，以及怎么解决：

为什么Setter没触发？ #

你的dynamicData是一个引用类型的对象。当你通过[(ngModel)]="dynamicData.sender"修改属性时，你只是在修改这个对象内部的一个值，并没有替换掉整个dynamicData对象的引用。而Angular的setter只有在你**直接给dynamicData赋值（比如this.dynamicData = {...newObject}）**的时候才会被调用——因为只有这时候才触发了对整个属性的"设置"操作。

几种可行的解决办法 #

1. 手动在属性修改时触发emit（简单场景适用）

直接在输入框的ngModelChange事件里手动调用你的editableData.emit，把整个对象传出去：

<input type="text" name="dynamicDataSender" *ngIf="someCondition" 
       [(ngModel)]="dynamicData.sender" 
       (ngModelChange)="editableData.emit(dynamicData)"/>

这个方法快速简单，但如果你的dynamicData有多个属性需要修改，每个输入框都得加一遍这个事件，有点繁琐。

2. 替换整个对象（强制触发setter）

不要直接修改对象属性，而是创建一个新的对象赋值给dynamicData，这样就能触发setter了。先在组件里写一个更新方法：

updateSender(newSenderValue: string) {
  // 用展开运算符创建新对象，保留原有属性，只更新sender
  this.dynamicData = {
    ...this.dynamicData,
    sender: newSenderValue
  };
}

然后模板里改成手动绑定ngModel和事件：

<input type="text" name="dynamicDataSender" *ngIf="someCondition" 
       [ngModel]="dynamicData.sender" 
       (ngModelChange)="updateSender($event)"/>

每次修改sender时，都会生成新的对象赋值给dynamicData，自然就触发了setter，进而调用editableData.emit。

3. 使用Proxy自动监听属性变化（复杂对象适用）

如果你的dynamicData有很多属性，不想每个都手动处理，可以用ES6的Proxy来包装对象，自动拦截所有属性的修改并触发emit。在组件的ngOnInit里初始化：

ngOnInit() {
  const component = this;
  this.formsData = new Proxy(this.formsData, {
    set(target, property, value) {
      // 更新属性值
      target[property] = value;
      // 发送新的对象（用展开运算符避免引用问题）
      component.editableData.emit({...target});
      return true;
    }
  });
}

这样不管你修改dynamicData的哪个属性，都会自动触发editableData.emit，完全不需要在模板里额外处理，适合复杂对象的场景。

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