平均スタック：Angular 2とNode JSを使用してドロップダウンをバインドできません

Question

IMAN（MongoDB Express Angular Node）を使用して角度2のドロップダウンをバックエンドのMonogDB値とバインドします。

次のように私はノードJS内のルートとモデルを持っている：

VAR \ WWW \ HTML \エクスプレス\ nodeauthapp-マスター\ルートは、VaRの\のWWW \

//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}); 
    } 
    }); 
}) 

categories.jsを\します\ HTML \エクスプレス\ nodeauthapp-マスター\モデル\ categories.jsリットルダウン角度2イム結合ドロップ

// 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) 
} 

IKE：

空白-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 URLに当たったとき、カテゴリリストを取得します。オブジェクト{カテゴリ：未定義}

私のオブジェクトがあります。私が手ブラウザログで

これに

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>