角4のポピュレートテーブルとjson

Question

以下は私の作業コードです！私は私のテーブルとその作業を取り込むことができるコード+ HTMLで

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 

@Injectable() 
export class ProdukteService { 

    constructor(private http: Http) {} 

    getProdukte() { 
     return this.http.get('assets/demo/data/produkte.json') 
       .toPromise() 
       .then(res => <any[]> res.json().records) 
       .then(records => { return records; }); 
    } 
} 

!:

<p-dataTable [value]="produkte" [style]="{'margin-bottom':'20px'}"> 
    <p-header>Recent Sales</p-header> 
    <p-column field="Produktitel" header="Vin"></p-column> 
    <p-column field="Preis" header="Year"></p-column> 
</p-dataTable> 

しかし、今、私は/そのようなデータベースからJSONを必要とします

import {Injectable} from '@angular/core'; 
import {Http, Response} from '@angular/http'; 

@Injectable() 
export class ProdukteService { 

    constructor(private http: Http) {} 

    getProdukte() { 
     return this.http.get('http://cube-developing.de/connect.php') 
       .toPromise() 
       .then(res => <any[]> res.json().records) 
       .then(records => { return records; }); 
    } 
} 

しかし、それは動作していない...私はこれを動作させるために変更する必要がありますか？ JSONが有効です！

Answer 1

APIが正常にデータを返すのであれば、コンポーネントconstructorまたはonInitのPromiseを解決する必要があります。

ngOnInit() { 
    this.ProdukteService 
     .getProdukte() 
     .then(result => {console.log(result); this.data = result)}) // assign data to variable 
     .catch(error => console.log(error)); 
} 

あなたは観測を使用して同じことをacheiveすることができます。

サービス

成分中

getProdukte() { 
     return this.http.get('http://cube-developing.de/connect.php') 
       .map(res => res.json().records) 
     } 

ngOnInit() { 
     this.ProdukteService 
      .getProdukte() 
      .subscribe(result => {console.log(result); this.data = result)}); // assign data to variable 

    }