Angular2, Data is keep binded to the original variable inside the function also

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