Angular2 编辑和更新视图

Question

我正在尝试做 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>

我有函数 makeEditable(employee,index)，它包含单行值和索引值。如果我做了 data.isEditable = true; 或 this.employees[index].isEditable = true，那么输出是

click here to view output image

为什么所有记录都在变化。根据概念，只有一个记录需要更改。请给我一些解决方案

Answer 1

我认为问题是

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

您不创建新员工实例但始终使用 this.employeeCreate，修改它并通过每次点击一次又一次地将其添加到 this.employees。

Answer 2

我已经通过添加这段代码解决了这个问题

this.employeeCreate = {};

在createEmployee函数中

Angular2 编辑和更新视图

Angular2 Edit and Update view

angular2-forms

angular2-template

angular