javascript - ionic 3 [object object] 无法解析数据

Question

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

{
"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 获取数据。在 network 中，我得到了 JSON 并通过 JSONLint 进行了验证。

但是如果想在控制台中打印，它会看到 [object Object]。

实际问题是如何解析字典的数据。

我想显示来自 product_detail_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)
    });
  }
}

Where responseData = response["data"] so I don't need to write ["data"] when I will fetch product_detail_image.

我的.html 文件

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

但是图片无法显示。

出现以下错误:

ERROR TypeError: Cannot read property 'undefined' of undefined

任何人都可以在我出错的地方指导我正确的方向？

已编辑:更清楚地了解wsPost()

wsPost(strAPIName, params){
    console.log("params : " + JSON.stringify(params))
    console.log("Api : " + this.baseURL+strAPIName)

    return new Promise((resolve, reject) => {
      this.http.post(this.baseURL+strAPIName, params, {
        headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded'),
      })
      .subscribe(response => {
        if(response["status"] == 1) {          
          resolve(response["data"])
        }
        else if(response["status"] == 2) {          
          alert(response["message"])  
        }
        else {
          alert("Something is going wrong please try again")  
        }
      }, (err) => {
        alert("Error: " + err.message)
      })
    })
  }

Answer 1

试试这个

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

或者在你的 Controller 中试试这个

this.dicProductDetail = responseData.data

如果你做了上面的，你不需要改变你的html端