Question

我正在使用Angular 2，我需要通过REST Api更新我的邮件对象，当＆＃34; SAVE＆＃34;单击按钮。

问题是，如果我点击输入外部，我希望它取消（并恢复）。

我的 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，但我不确定如何将输入值作为其内部{{ 1}}循环。

Answer 1

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

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的{{1}}绑定

input

点击更新API - Angular 2

1 个答案: