Update-API auf Klick - Angular 2

Question

Ich benutze Angular 2 und ich muss mein Mail-Objekt über eine REST Api aktualisieren, wenn die Schaltfläche "SAVE" geklickt wird.

Das Problem ist, wenn ich außerhalb der Eingabe klicke, möchte ich es abbrechen (und rückgängig machen).

meine inbox.compontent.html Datei sieht wie folgt aus:

<td class="inbox-data-from hidden-xs hidden-sm"> 
    <div class="pointer" id="{{mailItem.id}}"> 
    <span *ngIf="!mailItem.editMode" (click)="renameReference(mailItem)"> 
     {{mailItem.reference}} 
    </span> 
    <div *ngIf="mailItem.editMode"> 
     <div class="input-group"> 
     <input type="text" class="form-control" [ngModel]="mailItem.reference"> 
     <span class="input-group-btn"> 
      <button class="btn btn-default" type="button" (click)="updateReference(mailItem)">Save</button> 
     </span> 
     </div> 
    </div> 
    </div> 
</td> 

So im Anzeigemodus wird die Spanne zeigen, wenn ich die Spanne klicken, wird sie die Eingabe mit mailitem.reference Anzeige . Ich möchte nicht auf Änderung aktualisieren, ich möchte aktualisieren, wenn die Schaltfläche über updatereference(mailItem) geklickt wird.

Wenn ich [(ngModel)] setze, wird dies das Modell bei Änderung aktualisieren, aber das Problem ist, wenn ich außerhalb des Textfelds klicke (und abbricht), wird das Modell aktualisiert und meine Anzeige wird aktualisiert - aber nicht über API aktualisiert (und Datenbank), weil ich es abgebrochen habe.

Wenn ich auf den Button geklickt habe, wird das Modell aktualisiert und alles ist in Ordnung.

Also brauche ich einen Weg, um den Eingabewert auf den Klick zu bekommen und dann werde ich das Modell und die API aktualisieren, aber ich bin mir nicht sicher, wie der Wert der Eingänge als innerhalb einer *ngFor Schleife erhalten.

Answer 1

Fügen Sie eine zweite Eigenschaft hinzu, die eine Kopie der ersten ist, und bearbeiten Sie diese. Kopiere es zurück, wenn du es gespeichert hast.

class InboxCompontent { 

    onEdit(mailItem: IEditableMailItem){ 
     mailItem.referenceEdit = mailItem.reference; 
    } 

    updateReference(mailItem: IEditableMailItem){ 
     mailItem.reference = mailItem.referenceEdit; 
     mailItem.referenceEdit = ''; 
    } 

    onCancel(mailItem: IEditableMailItem){ 
     mailItem.referenceEdit = ''; 
    } 
} 

export interface IEditableMailItem{ 
    reference: string; 
    referenceEdit: string; 
    id: number; 
} 

Ändern der ngModel Bindung in input in der Vorlage

<input type="text" class="form-control" [ngModel]="mailItem.referenceEdit">