Angular2 - iki yönlü veri bağlamada önceki değeri geri yükle

Question

İki yönlü veri bağlamada kullanıcı mevcut düzenlemeleri iptal etmeye karar verirse ne olur? Bu, açısal 2'de nasıl başarılabilir?

import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'my-app', 
    template: `Name: {{ name }}<br> 
    <input *ngIf='editMode' type="text" [(ngModel)]='name' /><br> 
    <button *ngIf='!editMode' (click)='editMode = !editMode' >Edit</button> 
    <button *ngIf='editMode' (click)='editMode = !editMode' >Save</button><br> 
    <button *ngIf='editMode' (click)='editMode = !editMode' >Cancel</button>` 
}) 
export class AppComponent { 
    public name = 'Essa'; 
    public editMode false; 
} 

Ben kullanıcı iptal düğmesi bastığında eski değer restore edilecek istiyorum:

aşağıdaki kod parçasını düşünün. Bu örnekte plunker belirtilmiştir.

Answer 1

Bunun için doğrudan bir destek olduğunu sanmıyorum. Sadece değeri saklamak ve üzerinde

import {Component} from 'angular2/core'; 

@Component({ 
    selector: 'my-app', 
    template: `Name: {{ name }}<br> 
    <input *ngIf='editMode' type="text" [(ngModel)]='name' /><br> 
    <button *ngIf='!editMode' (click)='startEdit()' >Edit</button> 
    <button *ngIf='editMode' (click)='save()' >Save</button><br> 
    <button *ngIf='editMode' (click)='cancel()' >Cancel</button>` 
}) 
export class AppComponent { 
    public name = 'Essa'; 
    public editMode false; 
    startEdit() { 
    this.oldName = this.name; 
    this.editMode = !this.editMode; 
    } 
    save() { 
    this.editMode = !this.editMode; 
    } 
    cancel() { 
    this.editMode = !this.editMode; 
    this.name = this.oldName; 
    } 
} 

startEdit, save ve cancel gerekmez yöntemler bileşenine explicitely eklenecek iptal geri yükleyin. Bindings, ; ile ayrılan birden çok deyimi içerebilir, ancak birden fazla ifade varsa bu yaklaşımı daha iyi severim.

Plunker