Angular 2 Chargement des données via l'API du serveur: erreur data.slice

Question

Je tente de charger les données de mon API vers un composant personnalisé à l'aide du plug-in Angular2 ng Smart table.

selon leur documentation (https://github.com/akveo/ng2-smart-table/blob/master/src/app/pages/examples/server/basic-example-load.component.ts)

j'ai mon composant comme:

import { LocalDataSource } from 'ng2-smart-table'; 
import { ProductService } from '../../../services/product.service'; 

export class CategoryItemsComponent implements OnInit { 

... 
source: LocalDataSource; 

constructor(private productService: ProductService, 
      private flashMessage: FlashMessagesService, 
      private router: Router, 
      http: Http) { 
     this.source = new LocalDataSource(); 

     this.productService.getProductsOncategory(this.categoryid).subscribe((data) => { 
     this.source.load(data); 
    }); 

} 

ProductService .ts

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 }) 
return this.http.post(catUrl, catIdObj, { headers: headers }) 
.map((response: Response) => response.json()) 
    .do(data => console.log(JSON.stringify(data))) 
    .catch(this.handleError); 
} 

L'API ci-dessus utilisé dans la fonction de service fonctionne parfaitement dans mon facteur.

Maintenant, je dois charger les données Dame de cette API dans mon composant personnalisé.

Je reçois cette erreur:

ERROR TypeError: this.data.slice is not a function

at LocalDataSource.webpackJsonp.../../../../ng2-smart-table/lib/data-source/local/local.data-source.js.LocalDataSource.getElements (http://localhost:4200/1.chunk.js:22280:30) at LocalDataSource.webpackJsonp.../../../../ng2-smart-table/lib/data-source/data-source.js.DataSource.emitOnChanged (http://localhost:4200/1.chunk.js:22185:14) at LocalDataSource.webpackJsonp.../../../../ng2-smart-table/lib/data-source/data-source.js.DataSource.load (http://localhost:4200/1.chunk.js:22105:14) at LocalDataSource.webpackJsonp.../../../../ng2-smart-table/lib/data-source/local/local.data-source.js.LocalDataSource.load (http://localhost:4200/1.chunk.js:22243:38)

Answer 1

Ok je l'ai eu en utilisant comme:

source: LocalDataSource; 

constructor(private productService: ProductService, 
      private flashMessage: FlashMessagesService, 
      private router: Router, 
      http: Http) 
{ 
    this.source = new LocalDataSource(); 
} 

onChange(categoryid) { 
this.productService.getProductsOncategory(categoryid).subscribe(data => { 
    if (data.success) { 
    this.source.load(data.products); 
    console.log('Products obtained'); 
    } else { 
    console.log('Not obtained!'); 
    } 
}); 

} 

Answer 2

eu le même problème. Il a été résolu lorsque j'ai vérifié toutes les colonnes de correspondance et ajouté les données manquantes dans les tables. Par exemple, je delared une variable

Settings = { 
.... 
columns: { 
    id: { 
    title: 'id', 
    show: false, 
    type: 'string', 
    }, 
    name: { 
    title: 'name', 
    type: 'string', 
    }, 
    //compare columns in json response in same variable declaration 
    //for your data table [source] 
} 
} 

Et dans le deuxième cas, votre table essayer obtenir des données de dataTableSource avant le chargement complet de données, afin d'éviter l'utilisation de cette méthode setTimeout(); et mettre plus de temps. Par exemple:

getChildData(): Promise<any> { 
    return new Promise((resolve, reject) => { 
     setTimeout(() => { 
      resolve(this.childsList); 
     }, 4000);//<= increase this value 
    }); 
} 

me excuse pour mon anglais))