2017-09-05 25 views
0

你好,这可能是个愚蠢的问题,但是对于离子开发来说是新的,在尝试显示jsonobject的值时面临问题,现在让我详细解释从webservice获取jsonobject并需要显示它,并且我已成功获取值从服务,但同时我想我得到可能无法显示它无法准备属性“StatusName”未定义现在让我寄我迄今为止尝试:错误,而试图显示从Jsonobject价值在离子3?

这是我的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> 

不知道我在哪里犯错的人如何教我在哪里,我错了,谢谢前进!

回答

3

首先声明上述构造

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 只是打印状态名称

你不是传球达阵,所以不要使用效果。状态名称

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

感谢您的解决方案。 –