Как восстановить статус модели после ее изменения пользователем?

Question

Здесь - мой код.

Пользователь может щелкнуть ссылку, чтобы открыть диалоговое окно, в котором можно изменить атрибуты объекта person.

Я столкнулся с 2 проблемами

1. Когда пользователь изменяет какой-либо атрибут и затем нажимает кнопку «Закрыть» в диалоговом окне, как я могу восстановить исходное состояние объект person?

   Например: пользователь нажимает на ссылку «Питер», а затем удаляет «r» из имени, нажимает на кнопку закрытия, чтобы закрыть диалоговое окно, однако имя « Питер "в родительском windows заменен на" Пит "соответственно. Как предотвратить повторение этого явления?

2. Когда пользователь изменяет какой-либо атрибут и затем нажимает кнопку «Сохранить» в диалоговом окне,
   как я могу обновить измененную модель данные в таблицу материалов в главном компоненте?

   В строке 24 personEditor.component.ts я использую

   result = true;

   для имитации результата обновления.

   Если результат = true, я ожидаю, что измененные данные модели должны быть обновлены до основного компонента, иначе исходные данные модели должны быть обновлены до основного компонента. Однако оба случая не работают должным образом.

Answer 1

Это из-за мутации объекта, ваш элемент списка родительского компонента и объект элемента диалогового окна ссылаются на одну и ту же область памяти

вам нужно сделать копию элемента списка, прежде чем передавать его в диалоговое окно, есть два способа сделать копию

1. мелкая копия
2. глубокая копия

, как здесь определено

Мелкая копия

Мелкая копия - побитовая копия объекта. Создается новый объект, который имеет точную копию значений в исходном объекте. Если какие-либо поля объекта являются ссылками на другие объекты, копируются только ссылочные адреса, т. Е. Копируется только адрес памяти.

Пример

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')

Глубокая копия

Глубокая копия копирует все поля и создает копии динамически распределенной памяти, на которую указывают поля. Глубокое копирование происходит, когда объект копируется вместе с объектами, к которым он относится.

, поэтому перед передачей значения в диалог вы можете сделать копию, используя Object.assign

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

или вы можете javascript новый Деструктуризация объекта

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

о 2-м вопросе (таблица не обновляется)

после обновления данных, вам нужно вызвать изменение обнаружение обновить строку таблицы матов. см. эту ссылку для получения дополнительной информации по этой

здесь есть рабочая демонстрационная ссылка

Answer 2

При передаче данных в диалоговое окно, передайте их как {...p}, а при сохранении передайте измененные данные в основной компонент.

Попробуйте так:

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