點擊更新API - Angular 2

我正在使用Angular 2，當點擊「保存」按鈕時，我需要通過REST API更新郵件對象。點擊更新API - Angular 2

問題是，如果我點擊輸入外部，我希望它取消（和還原）。

我inbox.compontent.html文件看起來像這樣：

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

所以在顯示模式下，它會顯示跨度，當我點擊跨度，將顯示與mailitem.reference輸入。我不想更新更改，我想通過updatereference(mailItem)單擊按鈕時更新。

如果我把[(ngModel)]這將更新模型的變化，但問題是，如果我點擊文本框外（和取消）模型更新和我的顯示將被更新 - 但不是更新通過api（和數據庫），因爲我已經取消了它。

如果我點擊按鈕，它會更新模型，一切都很好。

所以我需要一種方法來獲得點擊輸入值，然後我會更新模型和API，但我不知道如何獲取輸入值作爲它在*ngFor循環內。

來源

2017-06-29 michael

添加第二個屬性，它是第一個屬性的副本並對其進行編輯。如果保存則將其複製回來。

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

來源

2017-06-29 16:08:30 Igor

點擊更新API - Angular 2

回答

相關問題