<tr *ngFor="让员工的员工；让 i=index"><td>{{employee.name}}</td><td>{{employee.position}}</td><td>{{employee.salary}}</td><td><a class="btn btn-success" (click)="editEmployee(i)">编辑</a><a class="btn btn-danger" (click)="deleteEmployee(i)">删除</a></td></tr></tbody>app.router.ts
import { ModuleWithProviders } from '@angular/core';从'@angular/router' 导入 { Routes, RouterModule };从 './app.component' 导入 { AppComponent };从 './home/home.component' 导入 { HomeComponent };import { CreateemployeeComponent } from './createemployee/createemployee.component';从 './viewemployee/viewemployee.component' 导入 { ViewemployeeComponent };从'./updateemployee/updateemployee.component'导入{ UpdateemployeeComponent };导出 const 路由器:路由 = [{ path: '',redirectTo: 'home',pathMatch: 'full'},{ path: 'createemployee', 组件: CreateemployeeComponent },{ 路径:'updateemployee'，组件:UpdateemployeeComponent}，{ path: 'viewemployee', 组件: ViewemployeeComponent },{ 路径:'家'，组件:HomeComponent}，{ 路径:'appcomponent'，组件:AppComponent}];导出常量路由: ModuleWithProviders = RouterModule.forRoot(router)
我在哪里做错了..我正在尝试将创建的员工与所有其他 3 个硬编码员工一起添加到现有表中
解决方案
我可以看到你的问题是你在一个组件中推送一个新员工......但是你在另一个中渲染了员工表，我看到了你的员工数组不是来自服务或来自@input() 指令...
例如创建一个服务，如:
import { Injectable } from '@angular/core';从'@angular/common/http' 导入 { HttpClient };从 'rxjs/Rx' 导入 { Observable };从'../../../../environments/environment'导入{环境}；从app/awards/shared/models"导入 { PraticheGridVM, PratichDTO };@Injectable()出口类雇员服务{私人员工 = [{name: "Sunil", position: "Developer", 工资: 20000},{名称:Vamshi"，职位:Java 开发人员"，薪水:30000}，{name: "Chethan", 职位: ".Net Developer", 薪水: 10000}];构造函数(私有http:HttpClient){}/*** 获取 Pratache Mese 分页* @param {PraticheGridVM} 过滤器* @returns {Promise}* @memberof PraticheService*/public GetEmployee(): Array{返回 this.employees;}/***获取Pratiche Trimestre Paginate* @param {PraticheGridVM} 过滤器* @returns {Promise}* @memberof PraticheService*/public AddEmployee(emp: Employee): Array{返回 this.employees.push(emp);}}
然后在你的组件中使用它......比如:
import { Component, OnInit } from '@angular/core';导入 { FormControl, FormGroup , Validators} from '@angular/forms';从@angular/forms"导入 { FormsModule, ReactiveFormsModule };从您的服务路径"导入 {EmployeeService}@成分({选择器:'app-createemployee'，templateUrl: './createemployee.component.html',styleUrls: ['./createemployee.component.css']})导出类 CreateemployeeComponent 实现 OnInit {模型:任何 = {};模型 2: 任何 = {};添加=假；创建=真；构造函数(私有员工服务:员工服务){}ngOnInit() {this.model = new FormGroup({'name': new FormControl(this.model.name,[Validators.required, Validators.minLength(4),]),'位置':新的FormControl(this.model.position，[Validators.required, Validators.minLength(4),]),'salary': new FormControl(this.model.salary, Validators.required)});}员工 = [{名称:Sunil"，职位:开发人员"，薪水:20000}，{名称:Vamshi"，职位:Java 开发人员"，薪水:30000}，{name: "Chethan", 职位: ".Net Developer", 薪水: 10000}];createEmp(){this.add=true;this.create=false;this.Show=false;this.edit=false;}添加员工(){this.employeeService.AddEmployee(this.model);this.Show = true;this.add = false;this.model = {};}}
i have added angular routing to my crud operation.. before without routing the data i added was able to display in the table but now after implementation of routing the data is not getting stored in the table
here is the code of createemployee.component.html
<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" name="name" minlength="4" maxlength="10" pattern="^[A-Za-z0-9]*[A-Za-z0-9][A-Za-z0-9]\S*$" [(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.pattern">
No Spaces
</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" minlength="4" maxlength="10" pattern="^[a-z]*$" [(ngModel)]="model.position" placeholder="Enter your position"
#position="ngModel" required />
<div *ngIf="position.invalid && (position.dirty || position.touched)" class="alert alert-danger">
<div *ngIf="position.errors.required">
Position is required.
</div>
<div *ngIf="position.errors.pattern">
Only Alphabets are must be entered
</div>
<div *ngIf="position.errors.minlength">
Position must be at least 4 characters long.
</div>
</div>
</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" pattern="[0-9]*"
minlength="5" maxlength="7" [(ngModel)]="model.salary" placeholder="Enter Salary" #salary="ngModel" required />
<div *ngIf="salary.invalid && (salary.dirty || salary.touched)" class="alert alert-danger">
<div *ngIf="salary.errors.required">
Salary is required.
</div>
<div *ngIf="salary.errors.minlength">
Salary must be in 5 numbers.
</div>
<div *ngIf="salary.errors.maxlength">
Salary must not be exceeded morethan 7 numbers.
</div>
<div *ngIf="salary.errors?.pattern">Only numebers should be typed
</div>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-default" routerLink="../viewemployee" [disabled]="empForm.invalid">Add Employee</button>
<button type="button" class="btn btn-default" routerLink="../home">Cancel</button>
</div>
</div>
</form>
createemployee.component.ts
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup , Validators} from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@Component({
selector: 'app-createemployee',
templateUrl: './createemployee.component.html',
styleUrls: ['./createemployee.component.css']
})
export class CreateemployeeComponent implements OnInit {
model: any = {};
model2: any = {};
add=false;
create=true;
ngOnInit() {
this.model = new FormGroup({
'name': new FormControl(this.model.name,
[Validators.required, Validators.minLength(4),]),
'position': new FormControl(this.model.position,
[Validators.required, Validators.minLength(4),]),
'salary': new FormControl(this.model.salary, Validators.required)
});
}
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() {
this.employees.push(this.model);
this.Show = true;
this.add = false;
this.model = {};
}
}
viewemployeecomponent.ts
<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>
app.router.ts
import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { CreateemployeeComponent } from './createemployee/createemployee.component';
import { ViewemployeeComponent } from './viewemployee/viewemployee.component';
import { UpdateemployeeComponent } from './updateemployee/updateemployee.component';
export const router: Routes = [
{ path: '',redirectTo: 'home',pathMatch: 'full'},
{ path: 'createemployee', component: CreateemployeeComponent },
{ path: 'updateemployee', component: UpdateemployeeComponent},
{ path: 'viewemployee', component: ViewemployeeComponent },
{ path: 'home', component: HomeComponent},
{ path: 'appcomponent', component: AppComponent}
];
export const routes: ModuleWithProviders = RouterModule.forRoot(router)
where did i have done the mistake.. i am trying to add the created employee into existing table with all other 3 hard coded employees
解决方案
form what i ca see your problem is you're pushing a new employee in a component ..but you render the employee table in another and i see yours employee array is not from a service or from a @input() directive ...
so for example create a service like:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Rx';
import { environment } from '../../../../environments/environment';
import { PraticheGridVM, PraticheDTO } from 'app/awards/shared/models';
@Injectable()
export class EmployeeService {
private employees = [{name: "Sunil", position: "Developer", salary: 20000},
{name: "Vamshi", position: "Java Developer", salary: 30000},
{name: "Chethan", position: ".Net Developer", salary: 10000}];
constructor(private http: HttpClient) { }
/**
* Get Pratiche Mese Paginate
* @param {PraticheGridVM} filter
* @returns {Promise<Array<PraticheDTO>>}
* @memberof PraticheService
*/
public GetEmployee(): Array<Employee> {
return this.employees;
}
/**
* Get Pratiche Trimestre Paginate
* @param {PraticheGridVM} filter
* @returns {Promise<PraticheDTO>}
* @memberof PraticheService
*/
public AddEmployee(emp: Employee): Array<Employee> {
return this.employees.push(emp);
}
}
and then use it in your components .. like:
import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup , Validators} from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import {EmployeeService} from 'yourservicePATH'
@Component({
selector: 'app-createemployee',
templateUrl: './createemployee.component.html',
styleUrls: ['./createemployee.component.css']
})
export class CreateemployeeComponent implements OnInit {
model: any = {};
model2: any = {};
add=false;
create=true;
constructor(private employeeService: EmployeeService){
}
ngOnInit() {
this.model = new FormGroup({
'name': new FormControl(this.model.name,
[Validators.required, Validators.minLength(4),]),
'position': new FormControl(this.model.position,
[Validators.required, Validators.minLength(4),]),
'salary': new FormControl(this.model.salary, Validators.required)
});
}
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() {
this.employeeService.AddEmployee(this.model);
this.Show = true;
this.add = false;
this.model = {};
}
}
这篇关于如何在角度路由中连接表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
