Question

由于allIpRecords: any;我想维护ipRecords: any;的副本，所以我遇到了一个奇怪的问题，因为在原始代码中ipRecords可能会更改并且我想保留allIpRecords中的上一个副本问题是每当插入函数运行时，如果我在插入函数中有this.allIpRecords = res.data;，那么在数组ipRecords和this.allIpRecords中都会创建插入行的重复条目，并且在表中同一行显示两次。如果删除this.allIpRecords，则数组中仅存在插入项的单个条目，而不会发生这种情况。即使在数据库中仅将其插入一次，但在本地数组中却显示两次。

   <td>
              <span></span>
          </td>
          <td>
              <input type="text" [(ngModel)]="newData.ip" />
          </td>
          <td>
              <input type="text"  [(ngModel)]="newData.forDomain" />
          </td>
          <td>
              <input type="text" [(ngModel)]="newData.status" />
          </td>
          <td>
              <input type="text" [(ngModel)]="newData.senderEmail" />
          </td>
          <td>
              <button class="common-btn" type="button" (click)="insert()">Insert</button>
          </td>


           </tr>
      <tr *ngFor="let record of ipRecords" class="colour02">
      <td>{{record.id}}</td>
      <td *ngIf="record.id === editRowId"><input type="text" [(ngModel)]="record.ip" ></td>
      <td *ngIf="record.id !== editRowId">{{record.ip}}</td>
      <td *ngIf="record.id === editRowId"><input type="text" [(ngModel)]="record.forDomain" ></td>
      <td *ngIf="record.id !== editRowId">{{record.forDomain}}</td>
      <td *ngIf="record.id === editRowId"><input type="text" [(ngModel)]="record.status" ></td>
      <td *ngIf="record.id !== editRowId">{{record.status}}</td>
      <td *ngIf="record.id === editRowId"><input type="text" [(ngModel)]="record.senderEmail" ></td>
      <td *ngIf="record.id !== editRowId">{{record.senderEmail}}</td>
      <td>
      <br>

Ts

       private newData: any = {};
       ipRecords: any;
       allIpRecords: any;

        ngOnInit() {
        this.auth.getAllIpRecords().subscribe((res: any)=>{
       this.ipRecords = res.data;
       this.allIpRecords = res.data;
       }
        }


        insert() {
if(Object.keys(this.newData).length === 0) {
  this.toastr.error("Empty record");
  return;
}
this.auth.addIpRecord(this.newData).subscribe((res: any)=>{
  if(res.status === "Success") {
    this.newData = {};
    this.ipRecords.push(res.data);
    this.allIpRecords.push(res.data);
    }
  }

Answer 1

在两个变量上，您都传递相同的对象引用-

this.ipRecords = res.data;
this.allIpRecords = res.data;

因此，对任何一个变量进行修改都会更改所有变量，因为它们是相同的引用。

要解决此问题，请克隆 res.data ，然后将其分配给变量。使用 JSON.stringify（）和 JSON.parse（）

有一个简单的技巧

this.ipRecords = JSON.parse(JSON.stringify(res.data));
this.allIpRecords = JSON.parse(JSON.stringify(res.data));

您可以找到有关对象克隆HERE

的更多详细信息

在两个不同数组中推送相同数据时，在对象数组中创建重复条目

1 个答案: