0

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、出力は

ここをクリックして出力イメージを表示

すべての記録が変更されている理由。概念に従って、1 つのレコードのみを正しく変更する必要があります。解決策を教えてください

4

2 に答える 2

0

このコードを追加して、この問題を修正しました

this.employeeCreate = {};

createEmployee機能中

于 2016-02-23T10:00:38.073 に答える