Angular2，Data也保持绑定到函数内部的原始变量

Question

I'm calling a function to replicate the data inside *ngFor loop like below.

<li (click)="replicateTicket(data);">&nbsp; Replicate</li>

Inside the function I'm updating name and Id of variable and pushing it inside the array. (In given example I'm not pushing the data to explain the behavior more vividly.

replicateTicket(data:any){
          data.name = data.name + ' (Replicated)';
          console.log(this.ticketList[this.ticketList.length-1].id);
          data.id = 0;
          console.log(this.ticketList[this.ticketList.length-1].id);
}

What I want is If id of original data is 5 than it should not change to 0.

1. Run plunker

2. click on 458 abc.

3. It should only update the new data and not the current one.

Am I doing Something wrong?

Answer 1

You need to create copy of the current object, change it and then push new object into an array, something like this for example: (I used code from your Plunker)

replicateTicket(ticket:any){
    let t = JSON.parse(JSON.stringify(ticket));
    t.name += ' (Replicated)';
    t.id = 0;
    this.ticketList.push(t);
}

Answer 2

you also can do this

  replicateTicket(ticket:any){
          let a = Object.assign({}, ticket);
          a.name = ticket.name + ' (Replicated)';
          a.id = 0;
          this.ticketList.push(a);
        }