Php Angular 4使用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('assets/demo/data/produkte.json')
               .toPromise()
               .then(res => <any[]> res.json().records)
               .then(records => { return records; });
    }
}

从'@angular/core'导入{Injectable}；
从'@angular/Http'导入{Http，Response}；
@可注射（）
导出类ProdukteService{
构造函数（私有http:http）{}
getProdukte（）{
返回此.http.get（'assets/demo/data/produkte.json'）
.toPromise（）
.then（res=>res.json（）.records）
。然后（记录=>{return records；}）；
}
}

使用该代码+HTML，我可以填充我的表及其工作状态！：

<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; });
    }
}

从'@angular/core'导入{Injectable}；
从'@angular/Http'导入{Http，Response}；
@可注射（）
导出类ProdukteService{
构造函数（私有http:http）{}
getProdukte（）{
返回此.http.get（'http://cube-developing.de/connect.php')
.toPromise（）
.then（res=>res.json（）.records）
。然后（记录=>{return records；}）；
}
}

但这不起作用。。。我必须改变什么才能让它工作？

---

JSON是有效的

如果API正确返回数据，则需要解决组件

构造函数

或

onInit

中的承诺

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

您可以使用可观测值来实现同样的目标

服务

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

    }

---

如果API正确返回数据，则需要在组件

构造函数

或

onInit

中解析承诺

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

您可以使用可观测值来实现同样的目标

服务

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

    }

---

尝试getProdukte（）{return this.http.get（'=>res.json（）.records）；}也不起作用：/您的响应仍然无效，或者我应该说它是有效的，因为它最初带有斜杠，但是当您解析它时，它会变成无效的json。尝试getProdukte（）{return this.http.get（'=>res.json（）.records）；}也不起作用：/您的响应仍然无效，或者正如我应该说的，它是有效的，因为它最初带有斜杠，但当您解析它时，它将变为无效的JSON.undefined main.bundle.js（1036,44）sry im在角度上有点新，我在两个组件中都得到了2个未定义的组件尝试并从服务中转到您正在获得的数据。我在控制台中得到的只是“未定义”在哪个级别组件或服务未定义main.bundle.js（1036,44）sry我在角度上有点新，我在两个组件中都得到了2个未定义的组件try and go from service您得到的数据是什么。我在控制台中得到的只是“未定义”在哪个级别的组件或服务