0

Im trying to display the product data using ng2-smart-table plugin.

I am able to get the products in the browser log, but i need to display the same onChange of a drop down value.

\app\components\layout\blank-page\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>

app\components\layout\blank-page\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!');
  }
});

}

app\services\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);
}

On selection of a value from drop down, i get data posted in my browser, i need to display the same in my ng2-smart-table

enter image description here

Neil Lunn
  • 148,042
  • 36
  • 346
  • 317
phyme
  • 331
  • 2
  • 11
  • 25

1 Answers1

0

Bind "view_update_items_smart_data" with the data you obtain from server.

    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!');
  }
});

}

For more information you can refer to https://akveo.github.io/ng2-smart-table/#/examples/populate-from-server

Nimish goel
  • 2,561
  • 6
  • 27
  • 42