Angular 2更改一个变量值会影响循环中的另一个变量值

Question

Staff.html

<div class="teacher-lists teacher" *ngFor="let staff of TotalData">
          <div class="photo-div">
            <img *ngIf="staff?.staffImage[0]?.secure_url" [src]=staff?.staffImage[0]?.secure_url/>
          </div>
          <div class="name-div">
            <h1 class="teacher-name">{{staff.teacherName}}</h1>
          </div>
          <div class="phone-div">
            <h1 class="teacher-name">{{staff.phoneNumber}}</h1>
          </div>
          <div class="acticons students">
            <a (click)="editStaff(staff)" class="link-block-2 w-inline-block" style="cursor:pointer">
              <img src="assets/images/edit.svg" data-ix="edit-popup">
            </a>
          </div>
        </div>

staff.component.ts

export class ViewAllComponent implements OnInit {
 public TotalData: any;
 public canEditStaff: boolean = false;
 public editStaffData: any = {};
 public showLoading: boolean = false;

getStaffs(min: any = 0, limit: any = '') {

this.api.post('getAllStaffs', { role: "Teaching", limit: limit, min: min })
  .map(res => res.json())
  .subscribe(
  data => {
    this.TotalData = data;
    console.log('success', data)
  },
  error => console.log(error)
  )
}

editStaff(staff) {
this.editStaffData.staffInfo = staff;
this.canEditStaff = !this.canEditStaff; 
}

closeStaff() {
this.canEditStaff = !this.canEditStaff;
}

saveStaff(registrationData, form) {
this.api.post('update-teachers', registrationData)
  .map(res => res.json())
  .subscribe(
  data => {
    if (data.success) {
      form.resetForm();
      this.getStaffs();
      this.closeStaff();
      this.showLoading = false;
    }
    console.log('success', data)
  },
  error => {
    console.log(error);
    this.showLoading = false;
  });
}

}

编辑员工弹出

<div class="edit-overlay" *ngIf="canEditStaff">
<div class="teacher-edit w-clearfix">
<a style="cursor:pointer" (click)="closeStaff()" class="close-edit w-inline-block" data-ix="colse-edit">
</a>
<div class="form-container">
  <h1 class="form-title">Edit staff</h1>
  <div class="underline"></div>
  <div class="w-form">

    <form name="email-form-2" #form="ngForm" (ngSubmit)="saveStaff(editStaffData.staffInfo,form)" class="form">
      <div class="w-row">
        <div class="w-col w-col-6">
          <div class="col-field-1">
            <label for="name" class="field-label">Teacher Name</label>
            <input type="text" pattern="[A-Z .a-z]{2,}" [(ngModel)]="editStaffData.staffInfo.teacherName" class="text-field w-input" name="name" data-name="Name" placeholder="Nmae">
          </div>
        </div>
      </div>
      <div class="w-row">
        <div class="w-row">
          <div class="w-col w-col-6">
            <div class="col-field-1 w-clearfix">
              <label for="name-6" class="field-label">Staff Photo</label>
              <input type="text" *ngIf="!editStaffData.staffInfo.staffImage.length" class="text-field w-input required" maxlength="256" name="name-2" data-name="Name 2" placeholder="Student Photo" readonly [(ngModel)]="editStaffData.photoName">
              <input type="text" *ngIf="editStaffData.staffInfo.staffImage.length>0" readonly class="text-field w-input" maxlength="256" name="name-2" data-name="Name 2" placeholder="Student Photo" [(ngModel)]="editStaffData.photoName">
              <input type="file" name="file" #fileInput id="file_input_id" (change)="upload()" [multiple]="false" accept="image/x-png,image/gif,image/jpeg" style="display:none;" />
              <label for="file_input_id" class="upload-image w-inline-block" style="cursor:pointer"></label>
              <p *ngIf="photoError" style="color:#dd2c00">{{photoError}}</p>
              <p *ngIf="photoSuccess" style="color:#42A948">Photo successfully saved</p>
            </div>
          </div>
          <div class="w-col w-col-6"></div>
        </div>
      </div>
      <div class="button-container">
        <button *ngIf="!showLoading" type="submit" [disabled]="!form.valid" class="save-button w-button">SUBMIT</button>
        <div *ngIf="showLoading" class="save-button w-button loading">Please Wait...</div>
        <p *ngIf="editStaffData.saveError" class="success-message">Please verify all fields</p>
        <p *ngIf="editStaffData.saveSuccess" class="success-message">Staff saved successfully</p>
      </div>
    </form>
    <div class="w-form-done">
      <div>Thank you! Your submission has been received!</div>
    </div>
    <div class="w-form-fail">
      <div>Oops! Something went wrong while submitting the form.</div>
    </div>
  </div>
</div>
<div class="bottom-line"></div>

  

如果我们在弹出窗口中编辑任何内容，后台数据中的值也会更改但不会在数据库中更改。如果我关闭弹出窗口，则更改的数据将在后台显示（原始）。如果我刷新页面，旧的（原始）数据又回来了。所以我的问题是为什么以及如何改变背景中的数据，虽然我没有使用任何常见的变量，也没有函数要求保存。

     

这是我的原始数据   

     

这是我正在编辑的弹出窗口。现在我更改教师姓名并删除电话号码。然后我关闭弹出窗口而不保存

  

并查看原始数据也会发生变化。

  

我怀疑如何在不保存或使用公共变量的情况下更改循环中的原始数据。

提前感谢您解决此问题。

Answer 1

这种情况正在发生，因为存在双向数据绑定。当UI元素更新时，更改会传播回模型（这就是循环中原始数据发生变化的原因）。您可以通过发送人员对象的副本来防止这种情况。您必须使用editStaff方法深深克隆人员对象。

staff.component.ts

editStaff(staff) {
    this.editStaffData.staffInfo = JSON.parse(JSON.stringify(staff)); //Deep clone staff
    this.canEditStaff = !this.canEditStaff; 
}