[英]ERROR TypeError: Cannot set property 'name' of undefined
我正在嘗試更新項目，並且遇到此問題“錯誤TypeError：無法設置未定義的屬性'名稱'”
這是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)
如果我刪除了“名稱”字段，則說明中也顯示了相同的問題。
錯誤原因：
[(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)] 2路數據綁定：
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
我認為您的問題是由以下原因引起的：
this.project.name = projectDataFromForm.projectName;
因為據我所知，您沒有實例化您的Project對象。
在ngOnInit ，嘗試添加
this.project = new Project(/* include any necessary data here for the Project constructor */);
錯誤類型錯誤：無法讀取 Object.eval 處未定義的屬性“testName”
[英]ERROR TypeError: Cannot read property 'testName' of undefined at Object.eval
郵遞員測試拋出錯誤：TypeError：無法讀取未定義的屬性“ProjectNumber”
[英]Postman test throws error: TypeError: Cannot read property 'ProjectNumber' of undefined
錯誤類型錯誤：無法讀取未定義的屬性“aDataSort”-ANGULAR 8
[英]ERROR TypeError: Cannot read property 'aDataSort' of undefined - ANGULAR 8
類型錯誤：無法讀取 Frida 中未定義的屬性“getPackageInfo”
[英]TypeError: cannot read property 'getPackageInfo' of undefined in Frida
我收到錯誤TypeError：undefined是不可迭代的（無法讀取屬性Symbol（Symbol.iterator））錯誤
[英]I am getting ERROR TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator)) error
Vaadin版本升級到7.4.6導致錯誤“ typeerror無法讀取未定義的屬性'noLayout'”
[英]Vaadin version upgrade to 7.4.6 leads to a error “typeerror cannot read property 'noLayout' of undefined”
Angular :: ERROR TypeError：無法將未定義或空值轉換為對象
[英]Angular :: ERROR TypeError: Cannot convert undefined or null to object
錯誤：TypeError：無法讀取未定義的屬性（讀取“indexOf”）
[英]ERROR: TypeError: Cannot read properties of undefined (reading 'indexOf')
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.