点击更新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循环内。

答

添加第二个属性，它是第一个属性的副本并对其进行编辑。如果保存则将其复制回来。

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

点击更新API - Angular 2

相关推荐