Question

解释 - 我在php中创建了一个服务，它在json中发送数据，你可以在这里看到它 - 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);显示空结果。请告知我如何在我的控制台中看到结果。

见下图，我可以在html页面上获取数据，但不能在console.log上获取数据

以下是我的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");
}

我可以从url获取json数据，但它不能在console.log中打印 - IONIC 2

1 个答案: