我正在尝试更新项目，并且遇到此问题“ ERROR TypeError：无法设置未定义的属性'name'”
这是update-project.thml：
<!doctype html>
<html class="no-js" lang="en">
<head>
...
</head>
<body ng-app="dateInputExample">
...
<div class="container custom-container">
<form [formGroup]="updateProjectForm" (ngSubmit)="updateProject(updateProjectForm.value)" class="ui form"
style="margin-left: 3%; width: 30%;">
<h1 id="projectTitle">Update Project</h1>
<div style="margin: 0 auto;">
<div style="margin-top: 100px;">
<div class="field">
<label>Project Name</label>
<input type="text" formControlName="projectName" class="form-control" name="projectName"
[(ngModel)]="projectData.name" placeholder="Your project name"
[ngClass]="{'is-invalid' : submitted && updateProjectForm.controls.projectName.errors}"/>
<div *ngIf="submitted && updateProjectForm.controls.projectName.errors" class="err_msg form-text">
<p class="err-msg">Project Name is required</p>
</div>
</div>
<div class="field" style="margin-top: 5%;">
<label>Project Description</label>
<textarea rows="4" cols="50" formControlName="projectDescription" [(ngModel)]="projectData.description"
class="form-control"
placeholder="Your project description"></textarea>
</div>
<label>Expiry Date</label>
<div>
<input type="date" formControlName="expiryDate" class="form-control" [(ngModel)]="dateInForm"
placeholder="expiryDate"
min="2019-08-07" max="2020-12-31" required/>
</div>
<div class="form-panel ui-helper-hidden">
<label>Budget</label>
<input type="number" formControlName="budget" maxlength="16" placeholder="Budget"
[(ngModel)]="projectData.budget">
</div>
<div class="field" style="margin-top: 5%;" *ngIf="showSkills">
<label>Skills</label>
<div class="ui segment">
<app-skills-multiselect>
</app-skills-multiselect>
</div>
</div>
<div class="field" style="margin-top: 5%;" *ngIf="showProjectType">
<label>Project Type</label>
<div class="ui segment">
<app-pt-multiselect></app-pt-multiselect>
</div>
</div>
<div class="field" style="margin-top: 5%;">
<button type="submit" class="ui primary button">Update</button>
<a routerLink="/back" class="ui button">Cancel</a>
</div>
</div>
</div>
</form>
</div>
...
</body>
</html>
这是update-project.ts
...
export class UpdateProjectComponent implements OnInit {
constructor(private formBuilder: FormBuilder, private projectService: ProjectService, private activatedRoute: ActivatedRoute,
private rout: Router, private datePipe: DatePipe) {
this.submitted = false;
this.router = rout;
this.updateProjectForm = this.formBuilder.group({
projectName: ['', [Validators.required]],
...
});
}
saved = false;
submitted: boolean;
projectName: string;
router: Router;
project: Project;
projectData: any = {};
dateInForm: string;
showMsg = false;
showErrMsg = false;
showSkills = false;
showProjectType = false;
skill = [];
selectedType = [];
@ViewChild(PrMultiselectComponent, { static: false })
private prMultiselectComponent: PrMultiselectComponent;
@ViewChild(SkillsMultiselectComponent, { static: false })
private skillMultiselectComponent: SkillsMultiselectComponent;
id = this.activatedRoute.snapshot.params.id;
updateProjectForm: any;
save() {
this.saved = true;
}
ngOnInit() {
this.projectService.getProjectById(this.id).subscribe(data => {
this.projectData = data;
console.log(this.projectData);
// Show selected skills
this.skillMultiselectComponent.selectedItems = this.projectData.skillSet.map(this.skillMultiselectComponent.parseSkillsList);
console.log(this.skillMultiselectComponent);
// Show selected Type
this.selectedType.push({ id: this.projectData.projectType.id,
itemName: this.projectData.projectType.name });
this.prMultiselectComponent.selectedTypeItems = this.selectedType;
// TODO don't show expiry date
// this.dateInForm = this.datePipe.transform(this.projectData.expiryDate, 'MM-dd-yyyy');
// console.log(this.dateInForm);
});
this.showSkills = true;
this.showProjectType = true;
}
canDeactivate(): boolean | Observable<boolean> {
if (!this.saved) {
return confirm('Are yo sure you want to left this page without saving information?');
} else {
return true;
}
}
updateProject(projectDataFromForm) {
if (window.confirm('Are you sure, you want to update?')) {
console.log('in updateProject()');
console.log(projectDataFromForm);
this.submitted = true;
this.project.name = projectDataFromForm.projectName;
this.project.description = projectDataFromForm.projectDescription;
this.project.expiryDate = projectDataFromForm.expiryDate;
this.project.budget = projectDataFromForm.budget;
// this.project.projectTypeId = this.idprojecttype;
this.project.projectTypeId = this.prMultiselectComponent.getSelectedItems();
this.project.skills = this.skillMultiselectComponent.getSelectedItems();
// var data = this.selectedItems.map(t=>t.id);
this.projectService.updateProject(this.id, this.project).subscribe(
data => {
this.updateProjectForm.reset();
this.showMsg = true;
// this.router.navigate(['/home']);
console.log('Successfully updated!');
},
err => {
this.showErrMsg = true;
console.log('Update failed!');
});
}
}
}
ng:///AppModule/UpdateProjectComponent.ngfactory.js:94 ERROR TypeError: Cannot set property 'name' of undefined at UpdateProjectComponent.updateProject (:4200/main.js:2678) at Object.eval [as handleEvent] (ng:///AppModule/UpdateProjectComponent.ngfactory.js:111) at handleEvent (:4200/vendor.js:101276) at callWithDebugContext (:4200/vendor.js:102894) at Object.debugHandleEvent [as handleEvent] (:4200/vendor.js:102530) at dispatchEvent (:4200/vendor.js:88996) at :4200/vendor.js:90893 at SafeSubscriber.schedulerFn [as _next] (:4200/vendor.js:94272) at SafeSubscriber.__tryOrUnsub (:4200/vendor.js:193518) at SafeSubscriber.next (:4200/vendor.js:193457)
如果我删除了“名称”字段，说明中也出现了同样的问题。 感谢您的帮助！
答案 0 :(得分：0)
错误原因：
[(ngModel)]="projectData.name"，如果您正在使用[(ngModel)] 2向数据绑定，则它将需要一些初始值，但是它是不确定的
第一个解决方案*ngIf='projectData'：
<div class="container custom-container">
<form [formGroup]="updateProjectForm" (ngSubmit)="updateProject(updateProjectForm.value)" class="ui form"
style="margin-left: 3%; width: 30%;">
<h1 id="projectTitle">Update Project</h1>
<div style="margin: 0 auto;" *ngIf='projectData'> <!-- HERE -->
<div style="margin-top: 100px;">
<div class="field">
<label>Project Name</label>
<input type="text" formControlName="projectName" class="form-control" name="projectName"
[(ngModel)]="projectData.name" placeholder="Your project name"
[ngClass]="{'is-invalid' : submitted && updateProjectForm.controls.projectName.errors}" />
<div *ngIf="submitted && updateProjectForm.controls.projectName.errors" class="err_msg form-text">
<p class="err-msg">Project Name is required</p>
</div>
</div>
...
</div>
</div>
</form>
</div>
第二次解决（提供一些初始值）：
project: Project = {
..., // other values too
name : ''
};
第三个选项，从全部中删除[(ngModel)]双向数据绑定：
this.project.name = projectDataFromForm.projectName;
this.project.description = projectDataFromForm.projectDescription;
this.project.expiryDate = projectDataFromForm.expiryDate;
this.project.budget = projectDataFromForm.budget;
// this.project.projectTypeId = this.idprojecttype;
this.project.projectTypeId = this.prMultiselectComponent.getSelectedItems();
this.project.skills = this.skillMultiselectComponent.getSelectedItems();
// --- Patch value will set values in your form ---
this.updateProjectForm.patchValue(this.project); // <---- HERE
答案 1 :(得分：0)
我认为您的问题是由以下行引起的：
this.project.name = projectDataFromForm.projectName;
就我所知，您没有实例化Project对象。
在ngOnInit中，尝试添加
this.project = new Project(/* include any necessary data here for the Project constructor */);