尝试在离子 3 中显示 Jsonobject 的值时出错？答案

【问题标题】：Error While Trying to Display Value from Jsonobject in ionic 3?尝试在离子 3 中显示 Jsonobject 的值时出错？
【发布时间】：2018-02-13 08:30:05
【问题描述】：

大家好，这可能是一个愚蠢的问题，但对于离子开发来说是新的，在尝试显示来自 jsonobject 的值时遇到问题，现在让我详细解释一下我从 web 服务获取 jsonobject 并需要显示它，我已经成功获取服务的价值，但在尝试获取 无法准备好属性 'StatusName 'undefined 时无法显示它现在让我发布到目前为止我尝试过的内容：

这是我从服务中获取的 json：

{
  "StatusName": "Open",
  "ApprovalStatusName": "Awaiting Approval",
  "CreatedByName": "Mark  (Marx)",
  "LastModifiedByName": "Mark  (Marx)",
  "ContractID": 20,
  "ContractCode": "PIL",

}

这是打字稿页面：

export class ContractApprovalViewPage {
  private  contracts :any;
  private contracttype:any;
  private results:any;


  constructor(public navCtrl: NavController, public navParams: NavParams,public contractApprovalViewService:ContractApprovalViewService ) {
  this.contracts=this.navParams.get('result');
   this.getContractApprovalView(this.contracts);

 }

getContractApprovalView(contracttype){
        this.contractApprovalViewService.getContractApproval(contracttype).then(data => {
            //console.log(data);
            this.results=data;
            console.log(this.results);
            console.log(this.results.CustomerName);
        });
    }
}

这是我的服务页面：

import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import { Events } from 'ionic-angular';
import 'rxjs/add/operator/map';
@Injectable()
export class ContractApprovalViewService {

    private _result;
    constructor(public http: Http,  public events: Events) { }
    getContractApproval(contracttype:any) {
    return new Promise(resolve => {
            this.http.get('http://172.16.6.187/sf/api/cnrt/getContractapprovalview/'+ contracttype.Column0 +'/C').subscribe(
                data => {
                //  console.log('http://xxxx/xx/xx/'+ contracttype.Column0 +'/C');
                    this._result = data;
                    resolve(JSON.parse(this._result._body));
                },
                err => {
                    this._result = err;
            //      this.events.publish("message:error", JSON.parse(this._result._body));
                }
            );
        });
    }
}

这是我的html页面：

<ion-header>

  <ion-navbar>
    <ion-title>Approval</ion-title>
  </ion-navbar>

</ion-header>


<ion-content >
<ion-list no-padding>
    <ion-card>
    <ion-item >
     {{results.StatusName}}
    </ion-item>
    </ion-card>
  </ion-list> 
</ion-content>

不知道哪里出错了，有人教我哪里错了，提前谢谢！

【问题讨论】：

标签： json ionic-framework ionic2

【解决方案1】：

首先在构造函数上方声明变量

statusName:string;

然后在下面的函数中

getContractApprovalView(contracttype){
        this.contractApprovalViewService.getContractApproval(contracttype).then(data => {
            //console.log(data);
            this.results=data;
            console.log(this.results);
            this.statusName = this.results.statusName; 
            //this.results.statusName status name key should match the response you are getting.
            console.log(this.results.CustomerName);
        });
    }
}

现在在 html 中只打印状态名称

因为你没有传递数组所以不要使用 results.statusname

<ion-content >
<ion-list no-padding>
    <ion-card>
    <ion-item >
     {{statusName}}
    </ion-item>
    </ion-card>
  </ion-list> 
</ion-content>

【讨论】：