Pile moyenne: Impossible de lier le menu déroulant en utilisant Angular 2 et Node JS

Question

En utilisant MEAN (Nœud angulaire MongoDB Express) pour lier ma liste déroulante dans l'angle 2 avec les valeurs MonogDB dans le backend.

J'ai des itinéraires et des modèles dans le nœud JS comme suit:

var \ www \ html \ Express \ routes nodeauthapp-maître \ \ 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-maître modèles \ \ 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 angulaire baisse de liaison 2 im vers le bas l IKE:

vide-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 déroulant lié à partir du journal de la console, mais en frontend, il semble qu'il n'y ait pas de valeurs liées. Lorsque je tape l'URL de l'API GET dans le facteur, j'obtiens la liste des catégories.

Dans les journaux du navigateur i Get: Object {catégories: non définies}

Mon objet a:

Answer 1

Modifier votre code HTML à ceci:

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