Question

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

如果我只是来回传递单个属性（IE object.name），则可以使用该功能，因为我想重用此逻辑，所以我希望将对象作为一个整体传递，并且通过传递，我的意思是本质上是复制原始文件，当他们点击编辑按钮时，在对话框中对副本进行“编辑”，然后当他们点击保存时。它会获取“副本”并将其传递回原始副本，从而更改列表中的对象。

就像我说的那样，添加到列表中不是问题，这是“编辑”我所处的位置。我还将补充一点，我对angular和javascript / typescript领域还不是很陌生，但是对某些OOP（面向对象）有经验

如果我只做一个属性（代码的第一部分），我将再次使用此功能

//This works as RoomGroup only has a name property.
export class RoomGroupDialogComponent implements OnInit {

  tempGroup: ConfigRoomGroup;
  newGroup = true;

  constructor(public diaglogRef: MatDialogRef<RoomGroupDialogComponent>,
              @Inject(MAT_DIALOG_DATA) private group: ConfigRoomGroup,
              public config: ConfigService) { }

  ngOnInit() {
    if (this.group.name) {
      this.newGroup = false;
    } else {
      this.newGroup = true;
      this.group.name = 'New Group';
    }
    this.tempGroup = Object.assign({}, this.group);


  }
  onSaveClick(): void {

    if (this.newGroup) {
      this.config.configData.roomSetup.groups.push(this.tempGroup);
    } else {
      this.group.name = this.tempGroup.name;
      console.log(this.group);
    }

    this.diaglogRef.close();
  }

  onCancelClick(): void {
    this.diaglogRef.close();
  }

}
///This does not work
export class RoomDialogComponent implements OnInit {

  tempRoom: ConfigRoom;
  newRoom = true;

  constructor(public dialogRef: MatDialogRef<RoomDialogComponent>,
              @Inject(MAT_DIALOG_DATA) private room: ConfigRoom,
              public config: ConfigService) { }

  ngOnInit() {
    if ( this.room.name) {
      this.newRoom = false;
    } else {
      this.newRoom = true;
      this.room.name = 'New Room';
    }

    this.tempRoom = Object.assign({}, this.room);
  }

  onSaveClick(): void {
    if (this.newRoom) {
      console.log(this.tempRoom);
      this.config.configData.roomSetup.rooms.push(this.tempRoom);
    } else {
      this.room = this.tempRoom;
      console.log(this.tempRoom);
      console.log(this.room);
      console.log(this.config.configData.roomSetup.rooms);
    }

    this.dialogRef.close();
  }

  onCancelClick(): void {
    this.dialogRef.close();
  }
}

Answer 1

这是Javascript中的常见问题，因为对象是通过引用而不是值传递的。因此，传递给构造函数的room和group属性是指向对象的指针，而不是对象本身。当您设置对象属性的值时，会影响原始对象中的属性，但是当您设置对象值时-即指向对象的指针的值，则表示指向其他对象，以及指向该对象的任何其他指针。原始对象（例如用于将对象传递到对话框的对象）仍指向原始对象。因此原始对象永远不会改变。这就是Object.assign()的用途（如您所知，因为您已经在使用它来创建临时工作数据对象）。因此，您需要更改“保存”的方式：

this.room = this.tempRoom;

到

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

角对话框“弹出”编辑数据

1 个答案: