ngModel，使用取消选项更新子组件中的值

Question

我在 父组件:table:

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

在子组件弹出用户中我有这个：

<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，该值将在父组件的 前端发生变化.

如何取消popupuser的更改，所以当我关闭弹出窗口时，父组件前端的name将回到原来的值。

我想有办法做到这一点，但我想要一个解决方案（当然如果可能的话），我可以找回整个用户，而不必处理用户对象的每个字段

Answer 1

在您的子组件中，在 ngOnInit 中使用 Object.assign 复制插入的用户并将其绑定到您的子组件模板。这样原用户就不会受到任何影响。

像这样：

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

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

ngModel，使用取消选项更新子组件中的值

ngModel, update value in child component with cancel option

angular

components

angular-ngmodel