ngModel, обновить значение в дочернем компоненте с опцией отмены

Question

У меня есть эта таблица в родительский компонент :

<tbody>
  <tr *ngFor="let user of arrUsers">
     <td>
         <app-popupuser [user]=user id="{{user._id}}"></app-popupuser>
         {{user.name}}
     </td>
     <td>
          <span (click)=open_user(user._id)>Open User</span>
     </td>
   </tr>
</tbody>

В дочерний компонент popupuser У меня есть это:

<div class="bold-word">Name: </div>
<span class="show-original">{{user.name}}</span>
<span class="edit-value">
    <input [(ngModel)]="user.name" name="name" type="text">
</span>

КогдаЯ обновляю значение, все в порядке, имя обновлено в db и во внешнем интерфейсе родительского и дочернего компонента.Моя проблема в том, что я не могу найти способ отменить обновление.

Например, если я изменяю значение имени на входе , из-за ngModel значение будет меняться на передний конец родительского компонента .

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

Я предполагаю, что есть способы сделать это, но я хотел бы найти решение (конечно, если это возможно), где я мог бы вернуть всего пользователя, ине приходится иметь дело с каждым полем пользовательского объекта

Answer 1

В вашем дочернем компоненте в ngOnInit используйте Object.assign , чтобы скопировать вставленного пользователя и связать его с шаблоном дочернего компонента.Таким образом, оригинальный пользователь не будет иметь никакого влияния.

Примерно так:

@Input() user: User;
innerUser: User;

ngOnInit() {
   this.innerUser = new User();
   Object.assign(this.innerUser, user);
}