Mean Stack：無法使用Angular 2和Node JS綁定下拉列表

Question

我使用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網址時，我得到了類別列表。

在瀏覽器日志中，我得到：對象{類別：未定義}

我的對象有：

Answer 1

將您的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>