试图从Ionic 3中显示jsonobject的值时出错

Question

大家好，这可能是愚蠢的问题，但对于离子开发而言是新的，在尝试显示jsonobject的值时面临问题，现在让我详细解释一下WebService的Jonobject，需要显示它，我已经成功地从服务获取了该值，但是在尝试获得时无法显示它，无法准备就绪属性'statusname'undfined 现在让我发布我到目前为止尝试过的内容：

这是我从服务获得的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>

不知道在哪里犯错误，有人在哪里教我在哪里错了，谢谢！

Answer 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中只需打印状态名称

由于您不传递数组，所以不要使用result.statusname

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