urlからjsonデータを取得できますが、console.logには表示されません - IONIC 2

Question

説明 - jsonでデータを送信するphpでサービスを作成しました。ここではfuniks.com/qbook/api/productmasterjson.phpの動作を確認できます。今、私は角度の結果をフェッチしたいと思っています。サービスを作成しました。私はすべてのことを書いていますが、私の.tsでは、私のconsole.logに配列を出力できません。コードを見て、親切に助言してください..

私は以下の、サービスを作成しましたが、私のサービスのコードです -

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

私listproduct.tsコード：

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

問題は私が直面しているconsole.log(this.list);は空の結果を示しています。私のコンソールに結果が表示されるように助言してください。

は、画像の下を参照してください、私はにconsole.log

以下

にhtmlページ上のデータをフェッチすることはできませんが、あなたがそれを必要とする場合は、私のlistproduct.htmlコードです -

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

ますconsole.logを呼び出すと、this.listは空です。回避するには、次のようになります。

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