how to display details using ng for in ionic 2 - html

Question

I doing thank you page in my project. in success call it will display ORDER DETAILS and Delivery Details & Failure call it will display only ORDER DETAILS..
Success call is working fine but failure call not displaying order details...
below is my html code..
<!--
Generated template for the ThankYouPage page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
-->
<ion-header>
<ion-navbar>
<ion-title>Order Summary</ion-title>
<ion-buttons end>
<button ion-button icon-only>
<ion-icon name="share"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content>
<div *ngIf="orderSuccess">
<ion-item no-lines>
<ion-row>
<ion-icon ios="ios-checkmark-circle" md="md-checkmark-circle" class="success"></ion-icon>
</ion-row>
<ion-row class="text-center">
<p>Thank you. Your order has been</p>
</ion-row>
<ion-row class="text-center"><p>Successfully Placed.</p></ion-row>
</ion-item>
<hr>
</div>
<div *ngIf="orderFailure">
<ion-item>
<ion-row>
<ion-icon ios="ios-close-circle" md="md-close-circle" class="failure"></ion-icon>
</ion-row>
<ion-row class="text-center">
<p>Sorry! Failed to place your order.</p>
</ion-row>
<ion-card>
<ion-card-content>
Your Order could not be completed because of the-"System Generated Issue"
</ion-card-content>
</ion-card>
</ion-item>
</div>
<ion-item *ngFor=" let item of orderDetailsArray">
<div class="div"> Order Details </div>
<ion-row *ngIf="orderSuccess">
<ion-col class="down">Order Date</ion-col><br>
<ion-col class="down">{{item.date_added | date:'MMM-dd-yyyy'}}</ion-col>
</ion-row>
<ion-row *ngIf="orderSuccess">
<ion-col>Order number</ion-col><br>
<ion-col>{{item.order_id}}</ion-col>
</ion-row>
<hr>
<ion-row class="row">
<ion-col class="lightbold">Order Total</ion-col><br>
<ion-col class="bold">$ {{item.total}}</ion-col>
</ion-row>
<ion-row class="pay">
<ion-col>Payment method:</ion-col><br>
<ion-col class="color">{{item.payment_method}}</ion-col>
</ion-row>
</ion-item>
<div *ngIf="orderSuccess">
<ion-item *ngFor=" let item of orderDetailsArray">
<div class="div"> Delivery Details </div>
<div class="font">
<div>{{item.shipping_firstname}} {{item.shipping_lastname}}</div>
<div>{{item.shipping_address_1}} , {{item.shipping_address_2}}</div>
<div>{{item.shipping_city}}, {{item.shipping_postcode}}</div>
<div>{{item.shipping_zone}}</div>
<div class="phone">
<ion-icon ios="ios-call" md="md-call" item-left></ion-icon>
<span>{{item.telephone}}</span>
</div>
<div class="mail">
<ion-icon ios="ios-mail" md="md-mail" item-left></ion-icon>
<span>{{item.email}}</span>
</div>
</div>
</ion-item>
</div>
</ion-content>
<ion-footer>
<ion-toolbar color="primary">
<div *ngIf="orderSuccess">
<ion-row class="center" (click)="submit();"> GO BACK HOME </ion-row>
</div>
<div *ngIf="orderFailure">
<ion-row class="center" (click)="submit();"> GO BACK HOME </ion-row>
</div>
</ion-toolbar>
</ion-footer>
below is my ts file...
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { Rest } from '../../providers/network/rest';
import { Logger } from '../../providers/logger/logger';
/*
Generated class for the ThankYou page.
See http://ionicframework.com/docs/v2/components/#navigation for more info on
Ionic pages and navigation.
*/
#Component({
selector: 'page-thank-you',
templateUrl: 'thank-you.html'
})
export class ThankYouPage {
orderDetailsArray = [];
public orderSuccess:boolean =false;
public orderFailure:boolean =false;
constructor(public navCtrl: NavController,
public rest: Rest,
public logger: Logger) {}
ionViewDidLoad() {
this.rest.get('/getOrder&order_id=0')
.subscribe((result) => {
console.log("checking getOrder"+JSON.stringify(result));
if(result.status == '1'){
console.log("success of getOrder");
this.orderDetailsArray=result.order;
this.orderSuccess=true;
}
else{
console.log("error of getOrder");
this.orderFailure = true;
}
})
}
submit(){
//this.navCtrl.setRoot(HomePage,{});
}
notSubmit(){
//this.navCtrl.push(PaymentPage,{});
}
}
Success call is working fine but failure call is not displaying order details...

Answer 1

It's because you are only setting the orderDetailsArray if your result.status is 1!
You should do it like this:
ionViewDidLoad() {
this.rest.get('/getOrder&order_id=0')
.subscribe((result) => {
console.log("checking getOrder"+JSON.stringify(result));
this.orderDetailsArray=result.order; // <-- place it here !
if(result.status == '1') {
console.log("success of getOrder");
this.orderSuccess=true;
}
else {
console.log("error of getOrder");
this.orderFailure = true;
}
});
}

Answer 2

You can also use this to convert result.status into Integer.Try this because status should always come in integer type and you are using string.I hope it will help you.
if(((result.status)*1) == 1) {...}