![](/img/trans.png)
[英]Form validation is not working in MEAN Stack using angular js and node js
[英]Mean Stack : Unable to bind the drop down using Angular 2 and Node JS
我使用MEAN(MongoDB Express Angular节点)将我的下拉列表2与下拉列表中的MonogDB值绑定在一起。
我在节点JS中具有路由和模型,如下所示:
无功\\ WWW \\ HTML \\快\\ nodeauthapp主\\路径\\ categories.js
//Get all categories
router.get('/get',(req,res,next) => {
//res.send('Get categories');
Categories.getAllCategories((err,categories)=>{
if(err)
{
res.json({success: false, msg:'Failed to get categories'});
}
else
{
res.json({success: true, mainCategories:categories});
}
});
})
\\ VAR \\ WWW \\ HTML \\快\\ nodeauthapp主\\型号\\ categories.js
// Categories Schema
const CategoriesSchema = mongoose.Schema({
category_name: {
type: String,
required: true
}
});
const Categories = module.exports = mongoose.model('Categories', CategoriesSchema);
//Get all categories
module.exports.getAllCategories = function(callback){
Categories.find({},callback)
}
在Angular 2 im绑定下拉列表中:
空白page.component.html
<form role="form">
<fieldset class="form-group">
<label>Select Category</label><br/><br/>
<select [(ngModel)]="selectedObject" name="selectedObject" class="form-control">
<option disabled>--Select--</option>
<option *ngFor="let category of categories" [value]="category">{{category}}</option>
</select>
</fieldset>
</form>
空白page.component.ts
export class BlankPageComponent implements OnInit {
category:String;
public categories: Array<any> = [];
constructor(private addproductService: AddproductService,
private flashMessage: FlashMessagesService,
private router: Router) { }
ngOnInit() {
const category = {
categories: this.category
}
console.log(category);
this.addproductService.loadData(category).subscribe(data => {
if(data.success){
this.categories = data.mainCategories;
console.log('Drop down binded');
} else {
console.log('Not binded');
}
});
}
addproduct.service.ts
export class AddproductService {
category: any;
loadData(category) {
let headers = new Headers();
headers.append('Content-Type', 'application/json');
return this.http.get('http://10.*.*.*:3000/categories/get', { headers: headers })
.map(res => res.json());
}
}
我从控制台日志绑定了下拉列表,但是在前端,似乎没有绑定任何值。
当我在邮递员中点击GET API网址时,我得到了类别列表。
在浏览器日志中,我得到:对象{类别:未定义}
将您的HTML代码更改为:
<form role="form">
<fieldset class="form-group">
<label>Select Category</label><br/><br/>
<select [(ngModel)]="selectedObject" name="selectedObject" class="form-control">
<option disabled>--Select--</option>
<option *ngFor="let category of categories" [value]="category.category_name">{{category.category_name}}</option>
</select>
</fieldset>
</form>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.