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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (1)
  • 关注 (0)
  • 查看 (16)

我有一个奇怪的问题,因为 allIpRecords: any;我想要保留副本,ipRecords: any;因为在原始代码中ipRecords可能会改变,我想保留以前的副本allIpRecords 。问题是每当插入函数运行时,如果我在this.allIpRecords = res.data;里面然后在两个数组中插入函数,ipRecordsthis.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);
    }
  }
提问于
用户回答回答于

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

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));

您可以在此处找到有关对象克隆的更多详细信息

扫码关注云+社区

领取腾讯云代金券