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

Question

我有一個表，其中存在條目。 我有一個編輯彈出窗口，其功能類似於添加和編輯。 現在，如果我在彈出窗口中編輯一行的內容，它將顯示我在表中鍵入的內容。 一旦單擊保存，該表必須具有先前的值，然后它必須使用已編輯的條目進行更新。

這是我的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>

驗證碼：

/* 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!');
      })
}

Answer 1

您需要獲取用戶的副本，然后將該副本綁定到彈出窗口。 然后在保存時，您可以更新原始用戶，在取消時，只需放棄副本：

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)方法中