Angolare2 - ripristina il valore precedente all'annullamento nel collegamento dati bidirezionale

Question

Nel collegamento bidirezionale dei dati cosa succede se l'utente decide di annullare le modifiche correnti? Come può essere raggiunto nell'angolare 2?

Si consideri il seguente frammento di codice:

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

voglio il vecchio valore da ripristinare quando l'utente preme il pulsante Annulla.

Ecco lo plunker come esempio.

Answer 1

Non penso ci sia un supporto diretto per questo. Basta memorizzare il valore e il ripristino su annullare

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

I metodi startEdit, save e cancel non è necessario aggiungere esplicitamente al componente. I binding possono contenere più di una istruzione separata da ; ma mi piace questo approccio meglio se è più di una dichiarazione.

Plunker