How to restore the model status after the user change it?

Question

Here is my code.

User can click on the link to pop up a dialogue box where the attributes of the person object can be modified.

I faced 2 problems

1. When the user modifies some attribute and then click on the "close" button in the dialogue box, how can I restore the original status of the person object?

   For example: A user clicks on the link "Peter", and then remove the "r" from the name, click on the close button to close the dialogue box, however, the name "Peter" in the parent windows is changed to "Pete" accordingly. How to prevent this phenomenon occurs again?

2. When the user modifies some attribute and then click on the "save" button in the dialogue box,
   how can I update the modified model data to the material table in the main component?

   In line 24 of personEditor.component.ts, I use

   result=true;

   to simulate the update result.

   If the result=true, I expect the modified model data should be updated to the main component, else the original model data should be updated to the main component. However, both cases are not working as expected.

Answer 1

This is because of Object mutation, your parent component list item and dialog box item object refer to same memory location

you need to make a copy of your list item, before pass it to dialog, there are two way you can make copy

1. shallow copy
2. deep copy

as defined here

Shallow copy

Shallow copy is a bit-wise copy of an object. A new object is created that has an exact copy of the values in the original object. If any of the fields of the object are references to other objects, just the reference addresses are copied i.e., only the memory address is copied.

Example

var a = {"a":2, "b": [2,3]};
var b = Object.assign({}, a);

const log = (step) => {
  console.log('before changes')
  console.log('value of a.a =>', a.a);
  console.log('value of b.a =>', b.a);
  console.log('value of a.b =>', a.b);
  console.log('value of b.b =>', b.b);
}
log('before changes')
console.log('updating b.a from 2 to 3');
b.a = 3;
log('after changes in b.a');
console.log('append 4 to b.b');
b.b.push(4);
log('after appending 4 to b.b')

Deep copy

A deep copy copies all fields, and makes copies of dynamically allocated memory pointed to by the fields. A deep copy occurs when an object is copied along with the objects to which it refers.

so before passing value to dialog, you can make a copy using Object.assign

const newCopy = Object.assign({}, p);
dialogConfig.data = {
  person:newCopy
};
const dialogRef = this.dialog.open(PersonEditorComponent,dialogConfig);

or you can you javascript new Object destructuring

const newCopy = {...p};
dialogConfig.data = {
  person: newCopy
};

about 2nd Question (mat-table not updating)

after updating data, you need to trigger a change detection to update mat-table row. please refer this link for more on this

here is a working demo link

Answer 2

While passing data to dialogbox, pass it like {...p} and on save , pass the modified data to the main component.

Try like this:

dialogConfig.data = {
  person:{...p}
};