首页 前端开发 Angular 6:TypeError:无法读取未定义的属性“值"
Angular 6:TypeError:无法读取未定义的属性“值"
[英] Angular 6: TypeError: Cannot read property 'value' of undefined
本文介绍了Angular 6:TypeError:无法读取未定义的属性“值"的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在创建一个简单的表单来提交数据、电子邮件、城市名称和酒店名称，当我单击提交时，出现此错误:
<块引用>
AboutComponent.html:79 错误类型错误:无法读取属性值"未定义的
这是我所拥有的:评论.js
//评论模式const CommentsSchema = mongoose.Schema({电子邮件: {类型:字符串，要求:真实},姓名: {类型:字符串，要求:真实}},{集合:'评论'});const Comments = module.exports = mongoose.model('Comments', CommentsSchema);component.ts
addReview(email, name) {this.moviesService.addReview(email, name).subscribe(success => {this.flashMessages.show('你是我们成功提交的数据', { cssClass: 'alert-success', timeout: 3000 });//获取idthis.activeRouter.params.subscribe((params) => {//tslint:disable-next-line:prefer-const让 id = params['id'];this.moviesService.getComments(id).订阅(评论=> {控制台日志(评论)；this.comments = 评论；});});}, 错误 =>{this.flashMessages.show('出了点问题', { cssClass: 'alert-danger', timeout: 3000 });});}html
<div *ngIf="angForm.controls['email'].invalid && (angForm.controls['email'].dirty || angForm.controls['email'].touched)"class="警报警报-危险"><div *ngIf="angForm.controls['email'].errors.required">电子邮件是必需的.
<div class="input-group mb-3 form-element_city"><select class="custom-select" id="inputGroupSelect01"><option selected *ngFor="let city of城市" [ngValue]="city.name" #name>{{city.name}}</option></选择>
<div class="input-group mb-3 form-element_hotel"><select class="custom-select" id="inputGroupSelect01"><option selected *ngFor="let hotel of hotels" [ngValue]="hotel.name" #name>{{hotel.name}}</option></选择>
<div class="form-group"><button type="submit" (click)="addReview(email.value, name.value)" class="btn btn-primary btn-block form-element_btn" [disabled]="!validEmail">ACCEDER</按钮>
</表单>
service.ts
addReview(email, name): Observable{const uri = `${apiUrl + this.addCommentsUrl}`;常量对象 = {电子邮件:电子邮件，姓名:姓名};返回 this.http.post(uri, obj);} 注意:当我删除名称时一切正常，但我还需要将城市名称和酒店名称与电子邮件一起插入到我的数据库中.
我的代码有什么问题?
解决方案
我认为 templateRef var 应该在 select 元素而不是 option 元素上.
取而代之
你能试试这个吗:
附注 templateRef 变量名称对于每个选择元素应该是唯一的.您不能对两个不同的元素使用相同的变量.
在此处查看#name:
<代码>1.<option selected *ngFor="let city of城市" [ngValue]="city.name" #name>{{city.name}}</option>2. <option selected *ngFor="let hotel of hotels" [ngValue]="hotel.name" #name>{{hotel.name}}</option> 如果有帮助，请告诉我！
I am creating a simple form to submit data , email, city name and hotel name, when I click submit i get this error:
AboutComponent.html:79 ERROR TypeError: Cannot read property 'value'
of undefined
Here is what i have :
comment.js
// Comments Schema
const CommentsSchema = mongoose.Schema({
email: {
type: String,
required: true
},
name: {
type: String,
required: true
}
},{
collection: 'comments'
});
const Comments = module.exports = mongoose.model('Comments', CommentsSchema);
component.ts
addReview(email, name) {
this.moviesService.addReview(email, name).subscribe(success => {
this.flashMessages.show('You are data we succesfully submitted', { cssClass: 'alert-success', timeout: 3000 });
// get the id
this.activeRouter.params.subscribe((params) => {
// tslint:disable-next-line:prefer-const
let id = params['id'];
this.moviesService.getComments(id)
.subscribe(comments => {
console.log(comments);
this.comments = comments;
});
});
}, error => {
this.flashMessages.show('Something went wrong', { cssClass: 'alert-danger', timeout: 3000 });
});
}
html
<form [formGroup]="angForm" class="form-element">
<div class="form-group form-element_email">
<input type="email" class="form-control info" placeholder="Email" formControlName="email" #email (ngModelChange)="onChange($event)">
</div>
<div *ngIf="angForm.controls['email'].invalid && (angForm.controls['email'].dirty || angForm.controls['email'].touched)"
class="alert alert-danger">
<div *ngIf="angForm.controls['email'].errors.required">
Email is required.
</div>
</div>
<div class="input-group mb-3 form-element_city">
<select class="custom-select" id="inputGroupSelect01">
<option selected *ngFor="let city of cities" [ngValue]="city.name" #name>{{city.name}}</option>
</select>
</div>
<div class="input-group mb-3 form-element_hotel">
<select class="custom-select" id="inputGroupSelect01">
<option selected *ngFor="let hotel of hotels" [ngValue]="hotel.name" #name>{{hotel.name}}</option>
</select>
</div>
<div class="form-group">
<button type="submit" (click)="addReview(email.value, name.value)" class="btn btn-primary btn-block form-element_btn" [disabled]="!validEmail">ACCEDER</button>
</div>
</form>
service.ts
addReview(email, name): Observable<any> {
const uri = `${apiUrl + this.addCommentsUrl}`;
const obj = {
email: email,
name: name
};
return this.http.post(uri, obj);
}
Note: when I remove name everything works fine , but i need also city name and hotel name to be inserted to my database together with email.
what is wrong with my code?
解决方案
I think templateRef var should be on select element instead option element.
Instead this
<option selected *ngFor="let city of cities" [ngValue]="city.name" #name>{{city.name}}</option>
Can you try this:
<select class="custom-select" id="inputGroupSelect01">
On a side note templateRef variable name should unique for each select element. You can not use same variable for two different elements.
See #name here:
1. <option selected *ngFor="let city of cities" [ngValue]="city.name" #name>{{city.name}}</option>
2. <option selected *ngFor="let hotel of hotels" [ngValue]="hotel.name" #name>{{hotel.name}}</option>
Let me know, if that helps!
这篇关于Angular 6:TypeError:无法读取未定义的属性“值"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
