Javascript ionic 3[对象]无法分析数据

实际上，我正在从服务器获取以下数据

{
"status": 1,
"message": "Product Detail",
"data": {
    "product": {
        "product_id": "87",
        "product_name": "Decide A4-12",
        "product_price": "Rs. 199.00",
        "product_shortdescription": "FREE Delivery Portrait",
        "product_description": "FREE Delivery\r\nSize : A4\r\nPaper Quality : 170 gsm\r\nPackage ",
        "product_small_image": "https:\\xxxxxx\/p\/o\/pos_02_2.jpg",
        "product_detail_image": "https:\\xxxxxx\/p\/o\/pos_02_2.jpg",
        "gallery": [{
            "gallery_url": "https:\\xxxxxx\/p\/o\/pos_02_2.jpg"
        }],
        "is_in_stock": 1
    },
    "reviews": {
        "count": 0,
        "review": []
    }
  }
}

我正在使用

POST

方法和

Promise

获取数据。在网络中我得到了JSON，并通过JSONLint进行了验证

但如果要在控制台中打印，则会看到[object]

实际上，问题是如何解析字典中的数据

我想显示

product\u detail\u image

我的.ts文件

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ApiProvider, APIName } from '../../providers/api/api';

@IonicPage()
@Component({
  selector: 'page-productdetail',
  templateUrl: 'productdetail.html',
})
export class ProductdetailPage {

  dicProductDetail: any

  constructor(public navCtrl: NavController, public navParams: NavParams,
     public apiProvider: ApiProvider) {       
     this.wsForGetProductDetail(navParams.get("productID"))
  }

  wsForGetProductDetail(productID: String){
    this.apiProvider.wsPost(APIName.getProductDetailApi, "product_id="+productID).then( responseData => {      
       this.dicProductDetail = responseData
       console.log("DATA ==> " + this.dicProductDetail["product"])
    }, (err) => {
       alert(err)
    });
  }
}

<ion-content padding >
  <img [src]="dicProductDetail[product].product_detail_image">
</ion-content>

其中responseData=response[“data”]因此，在获取

产品详细信息图像时，我不需要写入[“data”]

我的.html文件

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ApiProvider, APIName } from '../../providers/api/api';

@IonicPage()
@Component({
  selector: 'page-productdetail',
  templateUrl: 'productdetail.html',
})
export class ProductdetailPage {

  dicProductDetail: any

  constructor(public navCtrl: NavController, public navParams: NavParams,
     public apiProvider: ApiProvider) {       
     this.wsForGetProductDetail(navParams.get("productID"))
  }

  wsForGetProductDetail(productID: String){
    this.apiProvider.wsPost(APIName.getProductDetailApi, "product_id="+productID).then( responseData => {      
       this.dicProductDetail = responseData
       console.log("DATA ==> " + this.dicProductDetail["product"])
    }, (err) => {
       alert(err)
    });
  }
}

<ion-content padding >
  <img [src]="dicProductDetail[product].product_detail_image">
</ion-content>

试试这个

<ion-content padding >
  <img [src]="dicProductDetail['data'].product.product_detail_image">
</ion-content>

如果执行上述操作，则不需要在html端进行更改

<ion-content padding >
  <img [src]="dicProductDetail['data'].product.product_detail_image">
</ion-content>

如果您执行上述操作，则不需要在html端进行更改
您尝试过吗

console.log（JSON.stringify（data.product\u detail\u image））
你试过吗

console.log（JSON.stringify（data.product_detail_image））
感谢您的评论

您是对的，这是因为在从服务器获取数据之前加载了页面

所以你建议的链接不适合我，但我从下面的链接中找到了解决方案


我使用了
ngIf如下所示

<ion-content padding >
<div *ngIf="dicProductDetail">
    <img [src]="dicProductDetail['product'].product_detail_image">
</div>    




我的问题解决了。
谢谢你的评论

您是对的，这是因为在从服务器获取数据之前加载了页面

所以你建议的链接不适合我，但我从下面的链接中找到了解决方案


我使用了
ngIf如下所示

<ion-content padding >
<div *ngIf="dicProductDetail">
    <img [src]="dicProductDetail['product'].product_detail_image">
</div>    




我的问题解决了。
“Where responseData=response[“data”]。。。你到底在哪里做这件事？它不在您显示的代码中。@JJJ好的，我将更新我的代码，[object object]也是因为字符串连接。执行
console.log（this.dicProductDetail.product）
以查看实际对象。@JJJ-没有相同的[object object object]，顺便说一句，我为您的第一条注释更新了“Where responseData=response[“data”]”的可能重复项。。。你到底在哪里做这件事？它不在您显示的代码中。@JJJ好的，我将更新我的代码，[object object]也是因为字符串连接。执行
console.log（this.dicProductDetail.product）
以查看实际对象。@JJJ-不获取相同的[object object object]，顺便说一句，我已为您的第一条注释更新了可能重复的Get ERROR TypeError:无法读取UndefinedGet的属性“data”Get ERROR TypeError:无法读取undefined的属性“data”