Angular “角度对话框”；弹出窗口“；编辑数据

我正在尝试创建一个排序为“config”的页面，我有几个用户将“添加”对象/设备的区域。这将打开一个对话框窗口，其中包含该“对象”的属性/字段。还有一个保存和取消按钮。当用户单击“保存”时，它将工作并将其添加到数组/列表中，并显示所有添加的对象。在每个数组项的组件中，我还有一个编辑按钮。此编辑按钮将显示相同的对话框窗口。在这里，我的目标是让用户“编辑”数据，而无需对列表对象进行实时更改，直到按下“保存”

如果我只是来回传递一个属性（即object.name），我就可以这样做，因为我想重复使用这个逻辑，我想传递整个对象，所谓传递，我的意思是基本上复制原始对象，当他们点击编辑按钮时，在对话框中对副本进行“编辑”，然后点击保存。它获取“副本”并将其传递回原始对象，从而更改列表中的对象

正如我所说，添加到列表中并不是问题，而是“编辑”我所陷入的困境。我还要补充一点，我对angular和javascript/typescript的世界相当陌生，但有一些OOP（面向对象）方面的经验

如果我只做一个属性（代码的第一位），我就可以再次使用它

//这是因为RoomGroup只有一个name属性。
导出类RoomGroupDialogComponent实现OnInit{
tempGroup:ConfigRoomGroup；
newGroup=true；
构造函数（公共DialogRef:MatDialogRef，
@注入（MAT_对话框_数据）专用组：ConfigRoomGroup，
公共配置：配置服务）{}
恩戈尼尼特（）{
if（this.group.name）{
this.newGroup=false；
}否则{
this.newGroup=true；
this.group.name='newgroup'；
}
this.tempGroup=Object.assign（{}，this.group）；
}
onSaveClick（）：void{
if（this.newGroup）{
this.config.configData.roomSetup.groups.push（this.tempGroup）；
}否则{
this.group.name=this.tempGroup.name；
console.log（this.group）；
}
this.diaglogRef.close（）；
}
onCancelClick（）：void{
this.diaglogRef.close（）；
}
}
///这行不通
导出类RoomDialogComponent实现OnInit{
临时会议室：配置会议室；
newRoom=true；
构造函数（公共dialogRef:MatDialogRef，
@注入（MAT_对话框_数据）私人房间：ConfigRoom，
公共配置：配置服务）{}
恩戈尼尼特（）{
如果（此.房间.名称）{
this.newRoom=false；
}否则{
this.newRoom=true；
this.room.name='新房间'；
}
this.tempRoom=Object.assign（{}，this.room）；
}
onSaveClick（）：void{
如果（这个新房间）{
console.log（这个tempRoom）；
this.config.configData.roomSetup.rooms.push（this.tempRoom）；
}否则{
this.room=this.tempRoom；
console.log（这个tempRoom）；
控制台日志（此房间）；
log（this.config.configData.roomSetup.rooms）；
}
this.dialogRef.close（）；
}
onCancelClick（）：void{
this.dialogRef.close（）；
}
}

这是Javascript中的一个常见问题，因为对象是通过引用而不是值传递的。因此，传递到构造函数中的

room

和

group

属性是指向对象的指针，而不是对象本身。当设置对象属性的值时，会影响原始对象中的属性，但当设置对象值（即指向对象的指针的值）时，会指向其他对象，以及指向原始对象的任何其他指针，例如用于将对象传递到对话框的指针，保持指向原始对象。因此，原始对象永远不会更改。这就是

Object.assign（）

的用途（您知道，因为您已经在使用它来创建临时工作数据对象）。因此，您需要更改“保存”的方式：

this.room = this.tempRoom;

到

---

太好了，现在说得通了，我来试试。Tranter-谢谢，它最初不起作用，这时我记得，我将Object.assign逻辑添加到了将数据传递给对话框的函数中（在尝试解决这个问题时）。因此，它将一个“新对象”传递给了我认为是“原始对象”的对象，所以在实现了您的建议并修正了我的测试逻辑之后，它工作得非常好。再次感谢。我现在对它有了更深入的了解。

this.room = this.tempRoom;

Object.assign(this.room, this.tempRoom);