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>

或者在你的控制器中试试这个

this.dicProductDetail = responseData.data

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

Answer 2

你试过了吗

console.log(JSON.stringify(data.product_detail_image))

Answer 3

感谢 @Suraj Rao 的评论。

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

所以你建议的 link 对我不起作用，但我从下面 link.

找到了解决方案

我使用了 ngIf，如下所示。

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

我的问题解决了。

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

ionic 3 [object object] not able to parse data

javascript

ionic-framework

ionic2

ionic3

angular