Angular-cli----> CRUD操作更新员工数据不显示姓名字段显示其他字段

Question

我点击编辑 table 我无法在可用数据列表中查看我的名字..

here are the details of the table that i have added

after clicking the edit button i am not able to view my name field

这里是app.component.html

的代码

<h5>{{title}}</h5>
  <div class="col-sm-10">
    <button type="button" class="btn btn-default" (click)="createEmp()">Create Employee</button>
  </div>
<div style="margin-top: 60px;">

<div class = "container">
  <div *ngIf="add">
<h2>Add Employee:</h2>
<form class="form-horizontal" #empForm="ngForm">
    <div class="form-group">
      <label class="control-label col-sm-2" for="name">Name:</label>
      <div class="col-sm-10">
        <input type="text"  class="form-control"  minlength="4" name="name" [(ngModel)]="model.name" placeholder="Enter Your Name" #name="ngModel" required/>
        <div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger">
          <div *ngIf="name.errors.required">
            Name is required.
          </div>
          <div *ngIf="name.errors.minlength">
            Name must be at least 4 characters long.
          </div>
        </div>
</div>
</div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="position">Position:</label>

      <div class="col-sm-10">
        <input type="text" class="form-control" name="position" [(ngModel)]="model.position" placeholder="Enter your position" required />
</div>
</div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="salary">Salary:</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" name="salary" [(ngModel)]="model.salary" placeholder="Enter Salary" required />
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default" (click)="addEmployee()" [disabled]="empForm.invalid">Add Employee</button>
      </div>
    </div>
  </form>
</div>
<div *ngIf="edit">

  <h2>Update Employee:</h2>
  <form class="form-horizontal">
    <div class="form-group">
      <label class="control-label col-sm-2" for="name">Name:</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="name"
               name="name" [(ngModel)]="model2.name"  placeholder="Enter Your Name"/>

      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="position">Position:</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="position" name="position" [(ngModel)]="model2.position" placeholder="Enter your position" required/>
      </div>
    </div>
    <div class="form-group">
      <label class="control-label col-sm-2" for="salary">Salary:</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="salary" name="salary" [(ngModel)]="model2.salary" placeholder="Enter Salary" required/>
      </div>
    </div>
    <div class="form-group">
      <div class="col-sm-offset-2 col-sm-10">
        <button type="submit" class="btn btn-default" (click)="updateEmployee()">update Employee</button>
      </div>
    </div>
  </form>
</div>

<div *ngIf="Show">
<h2>Employee Details</h2>
<table class="table table-bordered">
    <thead>
      <tr>
        <th width=400>Name</th>
        <th width=400>Position</th>
        <th width=200>Salary</th>
    <th width=400>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let employee of employees; let i=index">
        <td>{{employee.name}}</td>
        <td>{{employee.position}}</td>
        <td>{{employee.salary}}</td>
    <td>
    <a class="btn btn-success" (click)="editEmployee(i)">Edit</a>
        <a class="btn btn-danger" (click)="deleteEmployee(i)">Delete</a>
        </td>
    </tr>
        </tbody>
    </table>

</div>
</div>
</div>

这里是app.component.ts

的数据

import {Component, OnInit} from '@angular/core';
import { FormControl, FormGroup , Validators} from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';



@Component({

  selector: 'app-root',

  templateUrl: './app.component.html',

  styleUrls: ['./app.component.css']

})

export class AppComponent implements OnInit{
  model:any={};
  model2:any={};
  edit= false;
  add=false;
  create=true;
  Show=false;
  myValue;
  ngOnInit(){
    this.model = new FormGroup({
      'name': new FormControl(this.model.name, [
        Validators.required,
        Validators.minLength(4),
      ]),
      'position': new FormControl(this.model.position),
      'salary': new FormControl(this.model.salary, Validators.required)
    });
  }
  title = 'Employee Details';
  employees = [{name :"Sunil",  position : "Developer", salary : 20000},
    {name :"Vamshi", position : "Java Developer",  salary : 30000},
    {name : "Chethan", position : ".Net Developer", salary : 10000}];
  createEmp(){
   this.add=true;
   this.create=false;
    this.Show=false;
    this.edit=false;
  }
  addEmployee()
  {
    console.log()
    this.employees.push(this.model);
    this.Show = true;
 this.add=false;
    this.model = {};
  }

  deleteEmployee(i){
    this.employees.splice(i,1)
    this.Show=true;
    console.log(i);
  }
  editEmployee(k){
    this.edit = true;
    this.Show=false;
    this.add=false;
    if(name!="")
    {
      this.model2.name = this.employees[k].name;
    }
    this.model2.position = this.employees[k].position;
    this.model2.salary = this.employees[k].salary;
    this.myValue = k;
  }
  updateEmployee(){
    this.Show=true;
    this.edit = false;
    let k = this.myValue;
    for(let i=0;i<this.employees.length;i++){
      if(i==k)
      {
        this.employees[i]= this.model2;
        this.model2 = {};
      }
    }
  }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

我哪里做错了？？

Answer 1

请从函数 editEmployee() 中删除以下检查

if(name!="") // Remove this if
    {
      this.model2.name = this.employees[k].name;
    }

应该是this.model2.name = this.employees[k].name;

Angular-cli----> CRUD操作更新员工数据不显示姓名字段显示其他字段

Angular-cli----> CRUD operation update employee data not displaying name field but displaying other fields

css

angular2-template

angular2-components

angular