取回旧值取消输入字段

Question

我有一个相当简单的双向数据绑定的输入字段，并希望有输入字段绑定的值返回到它以前是什么时，“取消“按钮被点击。

代码是目前这样的：

HTML：

<div *ngIf="editModeToggle" class="five wide column left floated"> 
    <div class="edit-on"> 
    <input type="text" class="header" [(ngModel)]="item.name"> 
    </div> 
</div> 
<div *ngIf="!editModeToggle" class="five wide column left floated"> 
    <div class="header">{{item.name}}</div> 
</div> 

    <div *ngIf="editModeToggle" class="one wide column"> 
    <a (click)="saveChanges(item)"><i class="save icon"></i></a> 
    </div> 
    <div *ngIf="editModeToggle" class="one wide column"> 
    <a (click)="cancelEdit()"><i class="cancel icon"></i></a> 
    </div> 

    <div *ngIf="!editModeToggle" class="one wide column"> 
    <a (click)="edit(item)"><i class="edit icon"></i></a> 
    </div> 

TS：

edit(item: any) { 
    this.editModeToggle = true; 
    this.oldItemData = this.item; 
    console.log('------ edit activate -------') 
    console.log('old item:', this.oldItemData.name); 
    console.log('item:', this.item.name); 
    } 

    saveSbuChanges(item: any) { 
    // some stuff happens 
    this.editModeToggle = false; 
    console.log('------ save -------') 
    console.log('old item:', this.oldItemData.name); 
    console.log('item:', this.item.name); 
    } 

    cancelEdit() { 
    this.editModeToggle = false; 
    this.item = this.oldItemData; 
    console.log('------ cancel -------') 
    console.log('old item:', this.oldItemData.name); 
    console.log('item:', this.item.name); 
    } 

我会想到的是，item.name，用 “ABC” 初始化将返回当我点击cancle时，ABC。相反，this.oldItemData.name接受新值。

控制台日志：

------ edit activate ------- 
old item: ABC 
item: ABC 
------ cancel ------- 
old item: ABCD 
item: ABCD 

我失去了什么/我该怎么甲肝取消值时被激活编辑模式恢复到什么呢？

Answer 1

this.oldItemData是对this.item的参考。它将始终包含更新的值。你需要做的是复制对象。这里是一个例子：

this.oldItemData = JSON.parse（JSON.stringify（this.item））;