入力フィールドの取り消し時に古い値を取り戻す

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); 
    } 

私が期待する何を "ABC" で初期化item.nameは、に戻るだろうということです私が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））;