douhao7677
douhao7677
2016-06-03 15:16
浏览 49
已采纳

(Ionic 2)从php服务获取数据是不确定的

I am new in ionic 2 and try to get my data from php services that i have created for ionic 1. It is works on ionic 1 but when i am getting data from ionic 2 it is undefined. It is works when i am getting data from php server on some website (from tutorial) but when getting my data from my local host it is undefined. It is the problem in my php code or i need to change my services. Thanks...

Here is my php code:

<?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;     
?>

Here is my services:

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

My home page:

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

My 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>

Update: Solved now, the code must be this.data = data in PromoService. Thanks..

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • dongzhuang6247
    dongzhuang6247 2016-06-06 06:36
    已采纳

    If res in

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

    is undefined then you don't get a value from http.get()

    Other suggestions

    You can use toPromise like

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

    or just return the promise returned from http.get() and subscribe on the call site

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

    and then just use subscribe() instead of then()

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

    See also What is the correct way to share the result of an Angular 2 Http network call in RxJs 5?

    Hint map, do, toPromise, ... need to be imported to become available.

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

    or just

    import 'rxjs/Rx';
    
    点赞 评论
  • duanaiguang1960
    duanaiguang1960 2016-06-06 06:27

    I have had some issues with Promises myself in Ionic2/Angular2. You could try to replace the Promise with an Observable instead in your service:

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

    Then, in the home page.

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

相关推荐