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获取数据。在网络中，我获得了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)
    });
  }
}

responseData =响应[＆＃34;数据＆＃34;] 所以我不需要写 [＆＃34;数据＆＃34;] 我什么时候取product_detail_image。

我的 .html 文件

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

但图像无法显示。

得到以下错误：

ERROR TypeError：无法读取属性＆＃39; undefined＆＃39;未定义的

任何人都可以指导我走向正确的方向吗？

已编辑：更清楚 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 发表评论。

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

所以你建议的链接对我不起作用，但我从下面链接找到了解决方案。

load data in the view before loading it

我使用了 ngIf ，如下所示。

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

我的问题解决了。

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

3 个答案: