Question

我有一个示例的角度应用程序，其中我实现了从弹出窗口到父页面以及从父页面再回到弹出窗口的数据绑定。

当我在弹出窗口中单击“保存”按钮时，从第一张表移到第二张表的数据行将被绑定并显示在父页面的数据表中。

但是第二次当我再次关闭弹出窗口时又再次打开弹出窗口并且不单击保存按钮时，先前绑定到父页面的数据将被删除。

有人可以帮助我解决这个问题吗？...！

Answer 1

问题是您关闭了dialog.ref（）而不通过此处的x按钮发出结果。

<i class="material-icons" id="close-icon" matTooltip="Close" (click)="dialogRef.close()">close</i>

将其更改为以下内容将解决此问题，或者通过dialogRef.close（resultDataHere）发出结果也将解决此问题。

<i class="material-icons" id="close-icon" matTooltip="Close" (click)="saveToParentPage()">close</i>

请注意： 如果将项目从第一个表移至第二个表，然后单击x，则在使用saveToParentPage（）或dialogRef.close（data）时仍会保存。

您将需要以某种方式在OpenPopup类中保留原始未修改数据的版本，并使用它。

修订版：

使用它在变量originalCheckedData中创建原始检查数据的不变副本

  data = Object.assign(ELEMENT_DATA);
  originalCheckedData = CHECKED_DATA.map(x => Object.assign({}, x));
  checkedData = Object.assign(CHECKED_DATA);

然后通过dialogRef.Close发出原始数据。

 <i class="material-icons" id="close-icon" matTooltip="Close" (click)="dialogRef.close(originalCheckedData);">close</i>

修订版2： GérômeGrignon是正确的，它将解决对话框外单击的问题，而我的方法不正确。

修订版3： 我认为我面临的挑战是将ELEMENT_DATA初始化为const，因为从技术上讲它不再是const，原始数据正在被更改/修改...我采取了以下方法来解决在cancel时恢复为原始状态的问题

将所有CONST设置为VAR，因为从技术上讲它们不再是CONST，并且在取消时可以更轻松地还原为原始数据。

var ELEMENT_DATA: Element[] = [
  { position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H' },
  { position: 2, name: 'Helium', weight: 4.0026, symbol: 'He' },
  { position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li' },
  { position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be' },
  { position: 5, name: 'Boron', weight: 10.811, symbol: 'B' }
];

var CHECKED_DATA: Element[] = [];

然后更改您的x按钮以触发cancelChange（）方法

<i class="material-icons" id="close-icon" matTooltip="Close" (click)="cancelChange()">close</i>

然后创建originalData和originalCheckedData的不变副本

data = Object.assign(ELEMENT_DATA);
originalData = ELEMENT_DATA.map(x => Object.assign({}, x));
checkedData = Object.assign(CHECKED_DATA);
originalCheckedData = CHECKED_DATA.map(x => Object.assign({}, x));

然后在您的cancelChange（）方法中执行以下操作

cancelChange(){
   ELEMENT_DATA = this.originalData.map(x => Object.assign({}, x));;
   CHECKED_DATA = this.originalCheckedData.map(x => Object.assign({}, x));;
   this.dialogRef.close(this.originalCheckedData)
  }

Answer 2

我遇到了同样的问题，并解决了这个问题，并在结果周围添加了条件语句。

dialogRef.afterClosed().subscribe(result => {
  console.log('The dialog was closed');
  console.log('from the parent component', result);
  console.log(result);
  if(result) {
    this.result = result;
  this.dataSource = new MatTableDataSource<Element>(this.result);
  }

如果您关闭弹出窗口并在其外部单击，我也可以工作。

使用角度材质表以角度从弹出窗口到父页面进行DataBinnding

2 个答案: