2017-07-19 2 views
0

Je tente d'afficher les données du produit à l'aide du plug-in ng2-smart-table.Pile moyenne: affiche les produits dans la table intelligente ng

Je suis en mesure d'obtenir les produits dans le journal du navigateur, mais j'ai besoin d'afficher la même chose sur le changement d'une valeur déroulante.

\ app \ composants \ layout \ page blanche \ blank-page.component.html

<form role="form"> 
     <fieldset class="form-group"> 
      <label>Select Category</label><br/><br/> 
       <select [(ngModel)]="selectedObject" (ngModelChange)="onChange(selectedObject)" name="selectedObject" class="form-control"> 
         <option>--Select Category--</option> 
         <option *ngFor="let category of categories" [value]="category._id">{{category.category_name}}</option> 
       </select> 
     </fieldset> 
    </form> 


//This is where table data is displaying, need to show my data here 

<ng2-smart-table [settings]="view_update_items_settings" [source]="view_update_items_smart_data" (userRowSelect)="onUserRowSelect($event)" class="table table-hover table-striped"></ng2-smart-table> 

composants app \ \ \ layout page blanche \ BLANK-page.component.ts

onChange(categoryid) { 

this.productService.getProductsOncategory(categoryid).subscribe(data => { 
    if (data.success) { 
    //this.selectedObject = data.mainProducts; 
    console.log(data) 
    console.log('Products obtained'); 
    } else { 
    console.log('Not obtained!'); 
    } 
}); 

} 

services app \ \ product.service.ts

getProductsOncategory(category_id){ 
    console.log(category_id) 
    let catUrl="http://10.*.*.*:5000/products/getProductsOncategory" 
    let headers = new Headers(); 
    headers.append('Content-Type','application/json'); 
    let catIdObj = JSON.stringify({category_id:category_id}) 
    console.log(catIdObj) 
    return this.http.post(catUrl,catIdObj,{headers:headers}) 
    .map((response:Response)=>response.json()) 
    .do(data=>console.log(JSON.stringify(data))) 
    .catch(this.handleError); 
} 

Lors de la sélection d'une valeur dans le menu déroulant, je reçois les données affichées dans mon navigateur, je dois montrer la même chose dans mon NG2-smart table

enter image description here

Répondre

0

Bind « view_update_items_smart_data » avec les données obtenir du serveur.

onChange(categoryid) { 

this.productService.getProductsOncategory(categoryid).subscribe(data => { 
    if (data.success) { 
    //this.selectedObject = data.mainProducts; 
    console.log(data) 
    console.log('Products obtained'); 
    this.view_update_items_smart_data.load(data); 
    } else { 
    console.log('Not obtained!'); 
    } 
}); 

} 

Pour plus d'informations vous pouvez consulter https://akveo.github.io/ng2-smart-table/#/examples/populate-from-server