Angular2 - Wiederherstellen des vorherigen Werts beim Abbrechen in zweiseitiger Datenbindung - eckig, Typoskript

In Zwei-Wege-Datenbindung was passiert, wenn der Benutzer entscheidet, die aktuellen Änderungen abzubrechen? Wie kann dies in Winkel 2 erreicht werden?

Betrachten Sie das folgende Stück Code:

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

Ich möchte, dass der alte Wert wiederhergestellt wird, wenn der Benutzer die Abbrechen-Taste drückt.

Hier ist das Plünderer als Beispiel.

Antworten:

Ich denke nicht, dass es eine direkte Unterstützung dafür gibt. Speichern Sie einfach den Wert und stellen Sie ihn beim Abbrechen wieder her

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

Die Methoden startEdit, save und cancel Sie müssen nicht explizit zur Komponente hinzugefügt werden. Bindungen können mehr als eine Anweisung enthalten, getrennt durch ; aber ich mag diesen Ansatz besser, wenn es mehr als eine Aussage ist.

Plunker