如何在angular2中回滚ngModel两种方式绑定数据[重复]答案

【问题标题】：How to Rollback the ngModel two Way binding data in angular2 [duplicate]如何在angular2中回滚ngModel两种方式绑定数据[重复]
【发布时间】：2017-06-05 17:50:54
【问题描述】：

我有一个 Angular 2 的表单，带有两种绑定数据值 ([(ngModel)]) 用于编辑和添加功能。

用户从列表页面单击编辑并更改输入中的值，同时编辑更改的（新）值也出现在列表页面中，而不是保存单击取消按钮。需要在列表页面显示旧值。

project-form.component.html
---------------------------
   <input class="form-control"  type="text" size="30" pInputText [(ngModel)]="project.title" name="title" pTooltip="Enter your username"/>

    <ul class="list-group">
          <li *ngFor="let event of project" class="list-group-item">
            <span class="event_release">{{event.startDate | date: 'dd/MM/yyyy'}} </span><br />
            <strong>{{event.title}}</strong>
          </li>
        </ul>

Project-form.component.ts 
-------------------------
@Input() project: Project;

提交时发送变量（this.project）保存更新的值（双向绑定变量），如果用户点击取消按钮（this.project）需要回滚。

【问题讨论】：

添加一些代码sn-p或代码链接

标签： angular typescript angular2-forms

【解决方案1】：

只需创建project 对象的深层副本。您面临的问题是由于列表页面和编辑页面在对象的同一副本上工作，因此在一个地方更改对象也会在另一个地方反映出来。

使用此 javascript 代码（在编辑页面中执行此操作）

let project_copy =JSON.parse(JSON.stringify(project))

然后在编辑而不是处理项目变量时使用这个 project_copy

【讨论】：