Angular2 - 双方向データバインディングでキャンセル時に以前の値を復元する

Question

双方向データバインディングでは、現在の編集をキャンセルするとどうなりますか？どのように角度2でこれを達成することができますか？

は、次のコードを考えてみましょう：

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

ユーザーがキャンセルボタンを押したときに、私は古い値を復元することにしたいです。

例としてplunkerです。

Answer 1

私はこれに直接的なサポートはないと思います。ただ、値を格納し、キャンセル

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とcancelがコンポーネントに明示的に追加する必要はありません。バインディングには;で区切られた複数のステートメントを含めることができますが、複数のステートメントの場合はこのアプローチがより好きです。

Plunker