Angulaire 2: chargement de données à l'aide de la source de données du serveur dans ma table intelligente ng

Question

Est-ce que quelqu'un sait comment charger les données du serveur à partir du plugin ng2-smart table d'Angular2.

J'ai peu de données sur les produits qui sont récupérées à partir de l'API Node et je peux afficher le même événement onClick dans le journal du navigateur.

Je dois montrer la même chose dans ce domaine de la table 3 plugins du parti qu'ils ont fourni dans cette documentation ci-dessous:

Frontend:https://akveo.github.io/ng2-smart-table/#/examples/populate-from-server

Sous "Serveur source de données Exemple"

Code:https://github.com/akveo/ng2-smart-table/blob/master/src/app/pages/examples/server/advanced-example-server.component.ts

Par conséquent j'ai configuré dans mon code comme ci-dessous:

blanc-page.component.ts

import { ServerDataSource } from 'ng2-smart-table'; 
import { Component } from '@angular/core'; 
import { Http } from '@angular/http'; 

@Component({ 
    selector: 'advanced-example-server', 
    template: ` 
    <ng2-smart-table [settings]="settings" [source]="source"></ng2-smart-table> 
`, 
    }) 

export class BlankPageComponent implements OnInit { 
    settings = { 
    columns: { 
     id: { 
     title: 'ID', 
     }, 
     albumId: { 
     title: 'Album', 
     }, 
     title: { 
     title: 'Title', 
     }, 
     url: { 
     title: 'Url', 
     }, 
    }, 
    }; 

    source: ServerDataSource; 

    //Doubt or Problem here!!! 
    constructor(http: Http) { 
    this.source = new ServerDataSource(http, { endPoint: 'https://jsonplaceholder.typicode.com/photos' }); 
    } 

    //Tried like this too (Which is not the right way of calling) 
    constructor(http: Http) { 
    this.source = new ServerDataSource(http, { endPoint: this.productService.getProductsOncategory(this.categoryid) }); 
    } 

//Dint work this too!! 

constructor(http: Http) { 
    this.source = new ServerDataSource(http, { endPoint:'http://localhost:5000/products/getProductsOncategory ' }); 
    } 
} 

Si mon fichier service.ts est comme, qui affiche réellement les données produits dans mon journal du navigateur que je dois montrer dans mes données de la table

getProductsOncategory(category_id){ 

    let catUrl="http://localhost: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); 
} 

erreur si j'utiliser mes projets url dans endpoint

Error: Uncaught (in promise): Error: Data must be an array. Please check that data extracted from the server response by the key '' exists and is array.

Answer 1

Vous devez définir dataKey pour ServerDataSource. Par exemple, si votre JSON est { data: [...], total: .. }, vous devez définir dataKey = 'data'.