Angular2编辑和更新视图

Question

I am trying to do CRUD app. my component code is

import {Component} from 'angular2/core';
import {FormBuilder, Validators, ControlGroup} from '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) which contains single row value and index value. If i did data.isEditable = true; or this.employees[index].isEditable = true , then output is

click here to view output image

why all records are changing. as per concept only one record need to be change right. Please give me some solution

Answer 1

I think the problem is

   createEmployee(){
        console.log(this.employeeCreate)
        this.createEmployeeJson = this.employeeCreate;
        this.employeeCreate.isEditable = false;
        this.employees.push(this.employeeCreate);

where you don't create a new employee instance but always use this.employeeCreate , modify it and add it again and again to this.employees with each click.

Answer 2

I have fixed this issue by adding this code

this.employeeCreate = {};

in createEmployee function