如何在ionic 2中使用ng for显示详细信息

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}}&nbsp;&nbsp;{{item.shipping_lastname}}</div>

                 <div>{{item.shipping_address_1}}&nbsp;,&nbsp;{{item.shipping_address_2}}</div>

                   <div>{{item.shipping_city}},&nbsp;{{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

您也可以使用此方法将result.status转换为Integer。请尝试执行此操作，因为状态应始终为整数类型，并且您使用的是字符串。希望对您有所帮助。

 if(((result.status)*1) == 1) {...}