Angular2編輯和更新視圖

我正在嘗試執行CRUD應用程序。我的組件代碼Angular2編輯和更新視圖

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": "[email protected]", "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": "[email protected]", "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

爲什麼所有記錄正在發生變化。根據概念，只有一條記錄需要更改。請給我一些解決方案

來源

2016-02-23 Deepak rao

這裏添加此代碼

this.employeeCreate = {};

修復了這個問題是Angular2樣本CRUD演示，這可能有助於http://www.primefaces.org/primeng/#/datatablecrud –

我已經在createEmployee功能

來源

2016-02-23 10:00:38

我認爲這個問題是

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

，你不創建一個新員工的實例，但總是用this.employeeCreate，修改並與每次點擊一次又一次地把它添加到this.employees。

來源

2016-02-23 09:28:15

Angular2編輯和更新視圖

回答

相關問題