如何使用Angular2和Typescript添加和更新表中的條目

我有一個表中存在條目。我有一個編輯彈出窗口功能，如添加和編輯。現在，如果我編輯彈出窗口中的一行內容，它會顯示我在表格中輸入的內容。該表必須具有以前的值只有一次點擊保存，然後它必須更新與編輯的條目。如何使用Angular2和Typescript添加和更新表中的條目

這裏是我的HTML代碼：

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12"> 
         <md-input-container> 
          <input type="text" mdInput name="employeeDashboardID" placeholder="EmployDashboard Id" #updated [(value)]="user.employeeDashboardID" required> 
         </md-input-container> 
        </div> 
       </div> 
       <!-- Save and Cancel Buttons --> 
       <div md-theme="reports" class="modal-footer" style="text-align: center;"> 
        <div layout-align="end center" layout="row"> 
         <button md-raised-button class="md-raised color-white" (click)="editUser.hide()" style="width: 45%;margin: 10px 5px;background-color: #FF5252;">Cancel</button> 
         <button md-raised-button class="md-raised color-white" (click)="editedUser(updated,user)" [disabled]="!editForm.form.valid" style="width: 45%;margin: 10px 5px;">Save</button> 
        </div> 
       </div>

TS碼：

/* edit User */ 
edit(user:any) { 
    this.user = user; 
    this.editUser.show(); 
} 
/* Function to edit User successfully */ 
editedUser(updated:any,user:any) { 
    console.log(user); 
    console.log(updated); 
    var data = { 
    user_id: user.users._id, 
    employee_id: user.employeeDashboardID 
    } 

this.ApiService 
    .changeUser(data) 
    .subscribe(
     users => { 
     this.toasterService.pop('success', 'updated successfully'); 
     this.editUser.hide(); 
     /* Get All Users */ 
      this.ApiService 
       .getUsers() 
       .subscribe(
       users => { 
        this.loading = false; 
        users.sort(function(a:any, b:any) { 
         return (a._id - b._id); 
         }); 
        this.users = users; 
        this.user = new User(); 
       },error => { 
        console.log(error); 
       }) 
     },error => { 
      this.toasterService.pop('error', 'Something went wrong!'); 
     }) 
}

來源

2017-09-25 Bhrungarajni

如果u想要的值應該更新點擊後保存按鈕，然後刪除雙向綁定。 –

感謝您的回覆..你可以請幫助我..我已經刪除ngmodel並寫入值 – Bhrungarajni

你需要把用戶的副本，那麼該副本綁定到你的彈出窗口。然後保存就可以更新原來的用戶和取消，只是放棄副本：

edit(user:any) { 
    this.currentEditUser = JSON.parse(JSON.stringify(user)); //This is one way to make a copy, there are others such as Object.assign() 
    this.editUser.show(); 
}

所以你彈出綁定到currentEditUser並通過currentEditUser到您editedUser(updated:any,user:any)方法

來源

2017-09-25 08:39:52

感謝您的迴應..我會嘗試 – Bhrungarajni

它不工作，請幫助 – Bhrungarajni

哪部分不工作？它是否在彈出窗口中顯示用戶並仍然允許更新字段？你能舉一個完整的例子嗎？ –

如何使用Angular2和Typescript添加和更新表中的條目

回答

相關問題