(Ionic 2) 从 php 服务获取数据未定义

Question

我是 ionic 2 的新手，我尝试从我为 ionic 1 创建的 php 服务获取数据。它适用于 ionic 1，但是当我从 ionic 2 获取数据时，它是未定义的.当我从某些网站（来自教程）上的 php 服务器获取数据时，它是有效的，但是当我从本地主机获取数据时，它是未定义的。这是我的 php 代码中的问题，或者我需要更改我的服务。谢谢...

这是我的 php 代码：

<?php
header('Access-Control-Allow-Origin: *');

        $db_name  = 'kuliner';
        $hostname = 'localhost';
        $username = 'root';
        $password = '';


        $dbh = new PDO("mysql:host=$hostname;dbname=$db_name", $username, $password);


        $sql = 'SELECT * FROM promo';
        $stmt = $dbh->prepare($sql);
    // execute the query
        $stmt->execute();


        $result = $stmt->fetchAll( PDO::FETCH_ASSOC );


        $json = json_encode( $result );
        echo $json;     
?>

这是我的服务：

import {Injectable} from '@angular/core';
import {Http} from '@angular/http';
import 'rxjs/add/operator/map';

/*
  Generated class for the PromoService provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class PromoService {
  data: any = null;

  constructor(public http: Http) {}

  load() {
    if (this.data) {
      // already loaded data
      return Promise.resolve(this.data);
    }

    // don't have the data yet
    return new Promise(resolve => {
      // We're using Angular Http provider to request the data,
      // then on the response it'll map the JSON data to a parsed JS object.
      // Next we process the data and resolve the promise with the new data.
      this.http.get('http://localhost:9999/KY Mobile/Promo/selectPromo.php')
        .map(res => res.json())
     .subscribe(data => {
        this.data = data.results;
        resolve(this.data);
      });
    });
  }
}

我的主页：

import {Page} from 'ionic-angular';
import {PromoService} from '../../providers/promo-service/promo-service';

@Page({
  templateUrl: 'build/pages/home/home.html',
  providers: [PromoService]
})
export class Home {

  public promos: any;  
  constructor(public promoService : PromoService) {
    this.loadPromo();
  };

  loadPromo(){
  this.promoService.load()
  .then(data => {
    this.promos = data;
    console.log("ABCD" + data);
  });
  }
}

我的html:

<ion-content padding class="page1">
<ion-list>
    <ion-item *ngFor="let promo of promos">
      <ion-avatar item-left>
        <img src="{{promo.image}}">
      </ion-avatar>
    </ion-item>
</ion-list>
</ion-content>

更新：现在解决了，代码必须是 this.data = PromoService 中的数据。谢谢..

Answer 1

我自己在 Ionic2/Angular2 中遇到了一些关于 Promises 的问题。您可以尝试在您的服务中用 Observable 替换 Promise：

return Observable.create(observer => {
    this.http.get('http://localhost:9999/KY Mobile/Promo/selectPromo.php').map(res =>res.json()).subscribe(data=>{
        observer.next(data)
        observer.complete();
    });
 });

然后，在首页。

loadPromo(){
  this.promoService.load().subscribe(data=>{
     this.promos = data;
     console.log("ABCD" + data);
  });
}

Answer 2

如果 res 在

 this.http.get('http://localhost:9999/KY Mobile/Promo/selectPromo.php')
    .map(res => res.json())

是 undefined 那么你不会从 http.get()

中得到值

其他建议

你可以用toPromise喜欢

  return this.http.get('http://localhost:9999/KY Mobile/Promo/selectPromo.php')
  .map(res => res.json())
  .do(data => this.data = data.results);
  .toPromise();

或者只是 return 从 http.get() 中 return 承诺并在呼叫站点上订阅

load() {
  if (this.data) {
    // already loaded data
    return Observable.of(this.data);
  }
  return this.http.get('http://localhost:9999/KY Mobile/Promo/selectPromo.php')
    .map(res => res.json())
    .do(data => this.data = data.results);
}

然后只使用 subscribe() 而不是 then()

loadPromo(){
  this.promoService.load()
  .subscribe(data => {
    this.promos = data;
    console.log("ABCD" + data);
  });
}

另见

提示 map, do, toPromise, ...需要导入才能可用。

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/toPromise';

或者只是

import 'rxjs/Rx';

(Ionic 2) 从 php 服务获取数据未定义

(Ionic 2) Getting data from php services is undefined

php

angularjs

ionic-framework

ionic2

angular