javascript - Angular 6:TypeError:无法读取未定义的属性“值”
问题描述
我正在创建一个简单的表单来提交数据、电子邮件、城市名称和酒店名称,当我单击提交时出现此错误:
AboutComponent.html:79 错误类型错误:无法读取未定义的属性“值”
这是我所拥有的: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);
组件.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>
服务.ts
addReview(email, name): Observable<any> {
const uri = `${apiUrl + this.addCommentsUrl}`;
const obj = {
email: email,
name: name
};
return this.http.post(uri, obj);
}
注意:当我删除名称时一切正常,但我还需要将城市名称和酒店名称与电子邮件一起插入到我的数据库中。
我的代码有什么问题?
解决方案
我认为 templateRef var 应该在 select 元素而不是 option 元素上。
取而代之的是
<option selected *ngFor="let city of cities" [ngValue]="city.name" #name>{{city.name}}</option>
你可以试试这个:
<select class="custom-select" id="inputGroupSelect01">
在旁注中,templateRef 变量名称对于每个选择元素应该是唯一的。您不能对两个不同的元素使用相同的变量。
在此处查看#name:
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>
让我知道,如果这有帮助!
推荐阅读
- c++ - 如何在 C++ 中读取带有空格的文件?
- c# - C# - ListView 总是显示重复项
- java - 按多列中的值对二维数组进行排序
- express - 错误:getaddrinfo EAI_AGAIN 未定义(ldapjs)
- python - 如何不部署在 git 控制的 db.sqlite3 文件下
- gpu - 现代 GPU 可以同时运行多个内核吗?
- html - Bootstrap 4:对新块使用“.row”还是“.col-12”更好?为什么?
- python - 在 Numpy 数组中提取小数点后的数字
- c# - 如果输入“x”文本,是否可以跳过下一行?C#
- apache-spark - google Spark-BigQuery-Connector 如何利用 BigQuery Storage API?