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

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

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

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

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

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

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


angular components angular-ngmodel
person Iraklis    schedule 02.12.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

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

Что-то вроде этого:

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

ngOnInit() {
   this.innerUser = new User();
   Object.assign(this.innerUser, user);
}
person benshabatnoam    schedule 02.12.2018
comment
Боже мой, спасибо, мой спаситель, я боролся часа 3 или около того xD - person Iraklis; 02.12.2018