Ich kann JSON-Daten von URL abrufen und aber nicht in console.log drucken - IONIC 2

Question

Erläuterung - Ich habe einen Dienst in PHP erstellt, der Daten in JSON sendet, Sie können es hier in Aktion sehen - funiks.com/qbook/api/productmasterjson.php. Jetzt möchte ich sein Ergebnis in eckigen holen, für das ich einen Service geschaffen habe, ich tue alles schreibe aber in meinem .ts, unfähig, Array in meiner console.log .. zu drucken, sehe unterhalb des Codes und bitte rate ..

i einen Dienst erstellt haben, unten ist der Code meines Dienstes -

listproduct.service.ts

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

@Injectable() 
export class ListproductService{ 
    private _url:string = "http://funiks.com/qbook/api/productmasterjson.php"; 
    constructor(private _http : Http){} 

    listProduct(){ 
     var headers = new Headers(); 
     headers.append('Content-Type', 'application/x-www-form-urlencoded'); 
     return this._http.post(this._url,{headers:headers}) 
       .map((response:Response) => response.json()); 
    } 
} 

mein listproduct.ts Code:

import { Component,OnInit } from '@angular/core'; 
import { IonicPage, NavController, NavParams } from 'ionic-angular'; 
import { ListproductService } from './listproduct.service'; 
import { Subscription } from 'rxjs'; 

/** 
* Generated class for the ListproductPage page. 
* 
* See https://ionicframework.com/docs/components/#navigation for more info on 
* Ionic pages and navigation. 
*/ 

@IonicPage() 
@Component({ 
    selector: 'page-listproduct', 
    templateUrl: 'listproduct.html', 
    providers : [ ListproductService ], 
}) 
export class ListproductPage implements OnInit{ 
    public list = []; 
    constructor(private _listProduct : ListproductService,public navCtrl: NavController, 
       public navParams: NavParams) { 
    } 

    ngOnInit() { 
    this._listProduct.listProduct().subscribe(data => {this.list = data;}); 
    console.log("inside product list"); 
    console.log(JSON.stringify(this.list)); 
    } 
} 

Problem, dem ich gegenüberstehe, ist console.log(this.list); zeigt leeres Ergebnis. Bitte geben Sie an, wie ich das Ergebnis in meiner Konsole sehen kann.

Bild unten sehen, kann ich Daten auf HTML-Seite holen, aber nicht auf console.log

Im Folgenden meine ist listproduct.html Code, falls Sie es brauchen -

<!-- 
    Generated template for the ListproductPage page. 

    See http://ionicframework.com/docs/components/#navigation for more info on 
    Ionic pages and navigation. 
--> 
<ion-header> 

    <ion-navbar> 
    <button ion-button menuToggle> 
     <ion-icon name="menu"></ion-icon> 
     </button> 
     <ion-title>Product list</ion-title> 
    </ion-navbar> 

    </ion-header> 

<ion-content padding> 
    <ion-grid> 
     <ion-row> 
      <ion-col>Id</ion-col> 
      <ion-col>Product/Service</ion-col> 
      <ion-col>Name</ion-col> 
      <ion-col>Unit</ion-col> 
      <ion-col>Category</ion-col> 
      <ion-col>HSN</ion-col> 
      <ion-col>Posting head</ion-col> 
      <ion-col>Rate</ion-col> 
      <ion-col>Type</ion-col> 
      <ion-col>SACCode</ion-col> 
      <ion-col></ion-col> 
     </ion-row> 
     <ion-row *ngFor = "let list of list"> 
      <ion-col>{{list.ID}}</ion-col> 
      <ion-col>{{list.PRODUCTSERVICE}}</ion-col> 
      <ion-col>{{list.NAME}}</ion-col> 
      <ion-col>{{list.UNIT}}</ion-col> 
      <ion-col>{{list.CATEGORY}}</ion-col> 
      <ion-col>{{list.HSN}}</ion-col> 
      <ion-col>{{list.POSTINGHEAD}}</ion-col> 
      <ion-col>{{list.RATE}}</ion-col> 
      <ion-col>{{list.TYPE}}</ion-col> 
      <ion-col>{{list.SACCODE}}</ion-col> 
      <ion-col><ion-icon ios="ios-close-circle" md="md-close-circle"></ion-icon></ion-col> 
     </ion-row> 
    </ion-grid> 
</ion-content> 

Answer 1

, wenn Sie Rufen Sie console.log auf, diese.list ist leer. Eine Arbeit um wäre:

ngOnInit() { 
this._listProduct.listProduct().subscribe(data => { 
    this.list = data; 
    //console.log(this.list); 
}); 
console.log("inside product list"); 
}