クリック時のAPI更新 - 角2

Question

私はAngular 2を使用しています。 "SAVE"ボタンをクリックするとREST APIを介してメールオブジェクトを更新する必要があります。

入力の外側をクリックすると、キャンセル（および元に戻す）したいという問題があります。

私 inbox.compontent.htmlファイルは次のようになります。私はそれがmailitem.referenceで入力が表示されますスパンをクリックしたときので、表示モードでは、スパンが表示されます

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

。私は変更を更新したくないので、updatereference(mailItem)でボタンをクリックしたときに更新したい。

[(ngModel)]これを変更するとモデルが更新されますが、テキストボックスの外側をクリックしてキャンセルするとモデルが更新され、表示が更新されますが、データベース）、私はそれをキャンセルしました。

ボタンをクリックすると、モデルが更新され、すべて正常です。

クリックで入力値を取得してモデルとAPIを更新する方法が必要ですが、入力値を内部の*ngForループとして取得する方法がわかりません。

Answer 1

最初のコピーである2番目のプロパティを追加して編集します。保存すると元に戻します。

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

変更ngModelテンプレートにinputに結合

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