angular - Angular2 Edit and Update view -

i trying crud app. component code

import {component} 'angular2/core'; import {formbuilder, validators, controlgroup} 'angular2/common';  function emailvalidator(control) {   var email_regexp = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;    if (!email_regexp.test(control.value)) {     return {invalidemail: true};   } }  function mobilevalidator(control) {     var mobil_regexp = /^[0-9]{10}$/;      if(!mobil_regexp.test(control.value)){         return {invalidmobile: true};     } }    @componeteemployeeform;     createemployeejson;     employees;     employeecreate;     constructor(createform: formbuilder){         this.createemployeeform = createform.group({             employeename: ["", validators.required],             employeeemail: ["", validators.compose([emailvalidator])],             employeemobile: ["", validators.compose([mobilevalidator])]         });         this.employees = [{ "employeename": "asd", "employeeemail": "asd@asd.com", "employeemobile": "2342342323", "iseditable": false }];         this.employeecreate = {};     }        createemployee(){         console.log(this.employeecreate)         this.createemployeejson = this.employeecreate;         this.employeecreate.iseditable = false;         this.employees.push(this.employeecreate);         console.log(this.employeecreate)         this.createemployeeform.controls["employeename"].updatevalue("")         this.createemployeeform.controls["employeeemail"].updatevalue("")         this.createemployeeform.controls["employeemobile"].updatevalue("")     }     makeeditable(data,index){         console.log(data)         data.iseditable = true;     }     updateediteddata(data,index){         data.iseditable = false;     } } component({     selector: 'crud',     templateurl: 'app/components/crud-only-fe/crud-only-fe.html' })  export class crudonlyfe{     createemployeeform;     createemployeejson;     employees;     employeecreate;     constructor(createform: formbuilder){         this.createemployeeform = createform.group({             employeename: ["", validators.required],             employeeemail: ["", validators.compose([emailvalidator])],             employeemobile: ["", validators.compose([mobilevalidator])]         });         this.employees = [{ "employeename": "asd", "employeeemail": "asd@asd.com", "employeemobile": "2342342323", "iseditable": false }];         this.employeecreate = {};     }        createemployee(){         console.log(this.employeecreate)         this.createemployeejson = this.employeecreate;         this.employeecreate.iseditable = false;         this.employees.push(this.employeecreate);         console.log(this.employeecreate)         this.createemployeeform.controls["employeename"].updatevalue("")         this.createemployeeform.controls["employeeemail"].updatevalue("")         this.createemployeeform.controls["employeemobile"].updatevalue("")     }     makeeditable(data,index){         console.log(data)         data.iseditable = true;     }     updateediteddata(data,index){         data.iseditable = false;     } } 

my html content is

<h1>create employee</h1>  <form (ngsubmit)="createemployee()" [ngformmodel]="createemployeeform" #create='ngform' novalidate>     <input type="text" placeholder="enter employee name" ngcontrol="employeename" [(ngmodel)]="employeecreate.employeename">     <span style="color:red">         <span *ngif="create.form.controls.employeename.touched && !create.form.controls.employeename.valid">             employee name required         </span>     </span>     <input type="text" placeholder="enter employee email" ngcontrol="employeeemail" [(ngmodel)]="employeecreate.employeeemail">     <span style="color:red">         <span *ngif="create.form.controls.employeeemail.touched && !create.form.controls.employeeemail.valid">             employee email required         </span>     </span>     <input type="text" placeholder="enter employee mobile" ngcontrol="employeemobile" [(ngmodel)]="employeecreate.employeemobile">     <span style="color:red">         <span *ngif="create.form.controls.employeemobile.touched && !create.form.controls.employeemobile.valid">             employee mobile required         </span>     </span>     <button type="submit">create</button> </form> <div *ngif="employees"> <br> <table class="table table-bordered">     <tr>       <th>emp id</th>         <th>employee name</th>         <th>email</th>         <th>mobile</th>         <th>action</th>     </tr>     <tr *ngfor="#employee of employees #i=index">         <td>{{i+1}}</td>         <td [contenteditable]="employee.iseditable">{{employee.employeename}}</td>         <td>{{employee.employeeemail}}</td>         <td>{{employee.employeemobile}}</td>         <td><button class="btn btn-xs btn-primary" (click)="makeeditable(employee,i)" *ngif="!employee.iseditable">edit</button><button class="btn btn-xs btn-primary" (click)="updateediteddata(employee,i)" *ngif="employee.iseditable">update</button></td>     </tr>  </table>  <pre>{{employees | json}}</pre> </div> 

i have function makeeditable(employee,index) contains single row value , index value. if did data.iseditable = true; or this.employees[index].iseditable = true, output

click here view output image

why records changing. per concept 1 record need change right. please give me solution

i think problem

   createemployee(){         console.log(this.employeecreate)         this.createemployeejson = this.employeecreate;         this.employeecreate.iseditable = false;         this.employees.push(this.employeecreate); 

where don't create new employee instance use this.employeecreate, modify , add again , again this.employees each click.