取回舊值取消輸入字段

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