如何使用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添加和更新表中的条目

回答

相关问题