Angular2 - 在双向数据绑定(bind)中取消时恢复以前的值

Question

在双向数据绑定(bind)中，如果用户决定取消当前编辑怎么办？如何在 Angular 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 方法不需要显式添加到组件中。绑定(bind)可以包含多个由 ; 分隔的语句，但如果它不止一个语句，我更喜欢这种方法。

Plunker