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