Question

我是离子2中的新手，并尝试从我为离子1创建的php服务中获取数据。它适用于离子1，但是当我从离子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>

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

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

如果<{1}}在

中

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();返回的承诺并在呼叫网站上订阅

http.get()

然后只使用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()

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

提示 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';

（Ionic 2）从php服务获取数据是不确定的

2 个答案: