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>

当我更新该值时，一切正常，在父组件和子组件前端的数据库和上对该名称进行了更新。我的问题是我找不到取消更新的方法。

例如，如果我更改输入中名称的值，由于ngModel，该值将在父组件的前端上更改。

>

我如何取消弹出窗口用户的更改，所以当我关闭弹出窗口时，父组件前端的名称将恢复为原始值。< / p>

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

Answer 1

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

类似这样的东西：

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

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

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

1 个答案: