Mean Stack : Unable to bind the drop down using Angular 2 and Node JS

Question

Im using MEAN (MongoDB Express Angular Node) for binding my drop down in angular 2 with MonogDB values in the backend.

I have routes and models in node JS as follows:

var\\www\\html\\Express\\nodeauthapp-master\\routes\\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

// 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:

blank-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

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());

  }
}

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.

In the browser logs i get : Object {categories: undefined}

My object has :

Answer 1

Change your HTML code to this :

<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>