Angular2编辑和更新视图

我正在尝试做CRUD应用程序。我的组件代码是

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

我的HTML内容是

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

创建员工
需要员工姓名
需要员工电子邮件
需要员工手机
创造


Emp ID
员工姓名
电子邮件
可移动的
行动
{{i+1}}
{{employee.employeeName}
{{employee.employeeEmail}
{{employee.employeeMobile}
编辑更新
{{employees | json}}

我有一个函数

makeEditable（employee，index）

，它包含单行值和索引值。如果我做了

data.isEditable=true

或

this.employees[index].isEditable=true

，则输出为

---

为什么所有记录都在变化。根据概念，只需更改一条记录即可。请给我一些解决办法

我想问题是

this.employeeCreate = {};

---

如果您不创建新员工实例，但始终使用此。employeeCreate，则每次单击都会对其进行修改并将其添加到此。employees。

我已通过添加此代码解决了此问题

---

在

createEmployee

function

中，这里有一个示例CRUD演示，其中包含Angular2，可能会有所帮助

this.employeeCreate = {};