[英]Mean Stack : Unable to bind the drop down using Angular 2 and Node JS
Im using MEAN (MongoDB Express Angular Node) for binding my drop down in angular 2 with MonogDB values in the backend. 我使用MEAN(MongoDB Express Angular节点)将我的下拉列表2与下拉列表中的MonogDB值绑定在一起。
I have routes and models in node JS as follows: 我在节点JS中具有路由和模型,如下所示:
var\\www\\html\\Express\\nodeauthapp-master\\routes\\categories.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\\Express\\nodeauthapp-master\\models\\categories.js \\ 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)
}
IN Angular 2 im binding drop down like: 在Angular 2 im绑定下拉列表中:
blank-page.component.html 空白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>
blank-page.component.ts 空白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 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());
}
}
I Get Drop down binded from the console log , but in frontend, there seems to be no values binded. 我从控制台日志绑定了下拉列表,但是在前端,似乎没有绑定任何值。
When i hit the GET API url in postman, i get the categories list. 当我在邮递员中点击GET API网址时,我得到了类别列表。
In the browser logs i get : Object {categories: undefined} 在浏览器日志中,我得到:对象{类别:未定义}
Change your HTML code to this : 将您的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.