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

Angular2 - 在双向数据绑定中恢复取消时的上一个值

1 个答案: