2017-07-19 13 views
0

ng2-smart-tableプラグインを使用して製品データを表示しようとしています。Mean stack:製品をngスマートテーブルに表示

私はブラウザのログで製品を取得できますが、同じonChangeをドロップダウン値で表示する必要があります。

\アプリ\コンポーネント\レイアウト\空白ページ\空白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> 

アプリの\コンポーネント\レイアウト\空白ページ\空白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!'); 
    } 
}); 

} 

アプリの\サービス\ 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); 
} 
0ドロップダウンから値を選択するには

、私は自分のブラウザにポストされたデータを取得し、私は同じを表示する必要が私のNG2-スマートテーブルで

enter image description here

答えて

0

バインド「view_update_items_smart_data」のデータとしますサーバーから取得する。あなたは https://akveo.github.io/ng2-smart-table/#/examples/populate-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!'); 
    } 
}); 

} 

関連する問題