Question

以下是我的工作代码！

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

使用该代码+ 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; });
    }
}

但那不起作用......我需要改变什么来使这个工作？ 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));
}

你可以使用 Observables 来实现相同的效果。

<强>服务

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

    }

Angular 4填充表与json

1 个答案: