我是一名初学者angular2程序员并正在研究它。
我创建了一个表单,当用户点击员工时,它会显示包含员工当前数据的可编辑表单。但是,当我第一次点击用户(甚至再次点击同一个用户)时,用户的信息并没有达到输入值。
<!-- User list part-->
<table>
<tr *ngFor="let emp of employees" (click)="empBtn(emp.empId)">
<td>{{ emp.empName }}</td>
<td>{{ getDepartName(emp.departId) }}</td>
<td>{{ emp.empPhone }}</td>
<td>{{ emp.wages.wage }}</td>
</tr>
</table>
<!-- Editable part -->
<button (click)="addBtn()">Add</button>
<div *ngIf="modeAdd || modeEdit">
<form #form ="ngForm" (ngSubmit) = "onSubmit(form.value)">
<label>Name </label><input type="text" name="name" value="{{ eName }}" ngModel>
<label>Department </label><select name="depart" value="{{ eDepartment }}" ngModel><option *ngFor="let depart of departments">{{ depart.departName }}</option></select>
<label>Phone </label><input type="text" value="{{ ePhone }}" name="phone" ngModel>
<label>Wage </label><input type="text" value="{{ eWage }}" name="wage" ngModel>
<button type="submit">Submit</button>
</form>
</div>
但是,如果我点击另一个用户,它会在表单的输入标记内显示值。我能够通过将eName
,eDepartment
,ePhone
,eWage
设置为与[(ngModule)]="eName"
类似的双向绑定来解决这个问题,但我不会这样做。我知道为什么我的代码无法正常工作。
这是打字稿部分。用户点击用户时会调用empBtn,并设置eName
,eDepartment
,ePhone
,eWage
。仅供参考,即使我在eName
,eDepartment, ...
上声明默认值,它也不会出现。谢谢您的考虑。
eName: string;
eDepartment: string;
ePhone: string;
eWage: number;
empBtn(empId: number): void {
console.log('click Employee ID: ', empId);
this.getEmployee(empId);
this.modeAdd = false;
this.modeEdit = true;
}
getEmployee(employeeId: number){
let selectedEmp: Employee = this.employeesObj.getEmployee(employeeId);
if(!selectedEmp){
console.log("employees: Invalid Employee ID");
}else{
console.log("employees: Get Employee info",selectedEmp.empName);
this.eName = selectedEmp.empName;
this.eDepartment = this.getDepartName(selectedEmp.departId);
this.ePhone = selectedEmp.empPhone;
this.eWage = selectedEmp.wages.wage;
}
}
答案 0 :(得分:0)
我建议你研究反应形式但是有这个问题。
http://blog.thoughtram.io/angular/2016/06/22/model-driven-forms-in-angular-2.html
<强> HTML 强>
<form [formGroup]="form" (ngSubmit) = "onSubmit(form.value)">
<label>Name </label>
<input type="text" formControlName="eName">
<label>Department </label>
<select formControlName="eDepartment">
<option *ngFor="let depart of departments">{{ depart.departName }}</option>
</select>
<label>Phone </label>
<input type="text" formControlName="ePhone">
<label>Wage </label>
<input type="text" formControlName="eWage">
<button type="submit">Submit</button>
</form>
导入模块
import { Component, OnInit} from '@angular/core';
import { FormGroup, FormControl, Validators, FormBuilder } from '@angular/forms';
在您的组件上
form: FormGroup; // declare form as formgroup
eName: string;
eDepartment: string;
ePhone: string;
eWage: number;
constructor(private fb: FormBuilder){ }
ngOnInit() {
this.updateForm()
}
updateForm(): void {
this.form = this.fb.group({
eName: [this.eName, Validators.required],
eDepartment: [this.eDepartment, Validators.required],
ePhone: [this.ePhone, Validators.required],
eWage: [this.eWage, Validators.required],
})
}
empBtn(empId: number): void {
console.log('click Employee ID: ', empId);
this.getEmployee(empId);
this.modeAdd = false;
this.modeEdit = true;
this.updateForm();
}
getEmployee(employeeId: number){
let selectedEmp: Employee = this.employeesObj.getEmployee(employeeId);
if(!selectedEmp){
console.log("employees: Invalid Employee ID");
}else{
console.log("employees: Get Employee info",selectedEmp.empName);
this.eName = selectedEmp.empName;
this.eDepartment = this.getDepartName(selectedEmp.departId);
this.ePhone = selectedEmp.empPhone;
this.eWage = selectedEmp.wages.wage;
}
}
去年,我也和你一样。对我来说,反应形式更好。您还可以搜索FormBuilder和Validators。
希望它有所帮助。