0
Angular2のng2-smartテーブルプラグインからサーバーデータを読み込む方法について説明します。角2：サーバーのデータソースを使用してスマートテーブルにデータをロード
Node APIから取得した商品データが少なく、ブラウザログに同じonClickイベントを表示できるImがあります。
フロントエンド：の下https://akveo.github.io/ng2-smart-table/#/examples/populate-from-server
「サーバーデータソースの例」
は、私は彼らが以下このドキュメントで提供している、このサードパーティのプラグインがテーブル領域内の同じを表示する必要があります
空白-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 ' });
}
}
私service.tsファイルが似ている、：は、そこで私は以下のように私のコードで構成されています私は、エンドポイントに私のプロジェクトのURLを使用する場合
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);
}
エラー私のテーブルデータに表示する必要がある
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.